[html5 и css3] Как выровнять три разных размера divs горизонтально и вертикально, не оставляя между ними пространства

Question

У меня есть три divs красный, черный и зеленый. Я хочу, чтобы красный div, высота которого 45 мм, а следующий черный div справа, высота которого составляет 55 мм, а затем зеленый div чуть ниже красного div, а высота зеленого div - 50 мм.

Я использую код

<div style="height:45mm;width:30mm;border:1mm solid red;float:left;position:relative;"> 
</div> 
<div style="height:55mm;width:20mm;border:1mm solid black;display: inline-block;"> 
</div> 
<div style="height:50mm;width:20mm;border:1mm solid green;"> 
</div> 

Но я получаю следующий результат:

https://i.stack.imgur.com/wSNpW.jpg

Что я хочу это:

https://i.stack.imgur.com/4d5wn.jpg

Thanx

Answer 1

Это использует flexbox с направлением столбца, обертывания и жестких ограничений (высота и ширина). Я использовал order, чтобы изменить порядок элементов, но вы можете просто переключить порядок в HTML.

#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    width: 35mm; 
 
    height: 105mm; 
 
} 
 

 
#rect1 { 
 
    height:45mm; 
 
    width:30mm; 
 
    border:1mm solid red; 
 
} 
 

 
#rect2 { 
 
    order: 1; 
 
    height:55mm; 
 
    width:20mm; 
 
    border:1mm solid black; 
 
} 
 

 
#rect3 { 
 
    height:50mm; 
 
    width:20mm; 
 
    border:1mm solid green; 
 
}

<div id="container"> 
 
    <div id="rect1"></div> 
 
    <div id="rect2"></div> 
 
    <div id="rect3"></div> 
 
</div>

Answer 2

Моя первоначальная реакция была использование flexbox! Но я не могу на самом деле выяснить, как сделать то, что вы хотите, с помощью display: flex.

Я могу делать то, что вы хотите в этой конкретной ситуации с position: relative на третьем прямоугольнике, но я не уверен, что это своего рода решение, которое вы ищете:

#rect1 { 
 
    height:45mm; 
 
    width:30mm; 
 
    border:1mm solid red; 
 
    float:left; 
 
    position:relative; 
 
} 
 

 
#rect2 { 
 
    height:55mm; 
 
    width:20mm; 
 
    border:1mm solid black; 
 
    display: inline-block; 
 
} 
 

 
#rect3 { 
 
    position: relative; 
 
    top: -11mm; 
 
    height:50mm; 
 
    width:20mm; 
 
    border:1mm solid green; 
 
}

<div id="rect1"></div> 
 
<div id="rect2"></div> 
 
<div id="rect3"></div>