[html5 和 css3]如何水平和垂直对齐三个不同大小的 div，而不在它们之间留下任何 space

Question

我有红色、黑色和绿色三种 div。我想要高度为 45mm 的红色 div 和右边的高度为 55mm 的下一个黑色 div 然后是红色 div 和绿色 [=30= 下方的绿色 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>

但我得到以下结果：

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

我想要的是：

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

谢谢

Answer 1

我最初的反应是 使用 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>

Answer 2

这使用了具有列方向、换行和严格约束（高度和宽度）的 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>

[html5 和 css3]如何水平和垂直对齐三个不同大小的 div，而不在它们之间留下任何 space

[html5 and css3]How to align three different size divs horizontally and vertically without leaving any space between them

html

css

alignment

positioning