[html5とcss3] 3つの異なるサイズのdivを水平方向と垂直方向に整列する方法

Question

赤、黒、緑の3つのdivがあります。私は、高さが45mmで右の次の黒いdivは高さが55mmで、次に赤のdivの下の緑のdivと緑のdivの高さが50mmの赤いdivが欲しいです。

私はコード

<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

ありがとう

Answer 1

これは、カラム、ラップ、タイトな拘束（高さと幅）の方向を持つフレックスボックスを使用します。要素の順序を変更するのに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

私の最初の反応はフレックスボックスを使用しました！しかし、私は実際に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>