html - [html5和css3]如何水平和垂直对齐三个不同大小的div而不留空隙

Question

我有红色、黑色和绿色三个 div。我想要高度为 45mm 的红色 div，右边的下一个黑色 div，高度为 55mm，然后是红色 div 正下方的绿色 div，绿色 div 高度为 50mm。

我正在使用代码

<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>

但我得到以下结果:

/image/wSNpW.jpg

我想要的是:

/image/4d5wn.jpg

谢谢

Answer 1

这使用了具有列方向、换行和严格约束(高度和宽度)的 flex 盒。我使用 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>