Question

我有三个div红色，黑色和绿色。我想要高度为45毫米的红色div和右边高度为55毫米的黑色div，然后是红色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

感谢名单

Answer 1

这使用了一个带有列，包裹和紧密约束（高度和宽度）方向的弹性框。我已使用order更改元素的顺序，但您只需在HTML中切换顺序。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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>

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

2 个答案: