display：inline-block：第一个div比第二个短;填补那个空间

Question

我有三个div： a ， b 和 c 。它们各自宽48％并显示为内联块。此样式将应用于多个页面。 Div a 总是短于div b 。这会在 a 的底部和 c 的顶部之间产生间隙。 （Div a 和 b 在每个页面上的高度略有不同，但 a 总是会更短。由于高度不一致，我不会＃39;我觉得我可以可靠地使用margin-top：例如-10px。）

怎么样：

我多么想要：

编辑
手机：

/编辑

CSS

div {
     width:48%;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}

@media only screen and (max-width: 600px) {
     div {
          width:100%;
     }
}

HTML

<div style="border-color:red;">a<br>a</div>
<div style="border-color:green;">b<br>b<br>b<br>b<br>b<br>b<br>b<br>b</div>
<div style="border-color:blue;">c<br>c<br>c<br></div>

媒体查询允许三个div在较小的屏幕尺寸上堆叠在一列中。这就是div需要按此顺序排列的原因。

Answer 1

由于双重布局，有点棘手。保持相同的html布局你可以使用元素的选择器和另一个处理浮点数和边距的“b”项（类或：nth-​​child（2）或...）来完成。

（在代码段中更改媒体以检查布局更改）

div{display:inline-block;width:48%;border:1px solid red;float:left;clear:left}

div.b{clear:none;float:right;margin-right:2%}

@media only screen and (max-width: 200px) {
     div {
          width:100%;float:none;clear:both;
     }
     div.b{margin-right:0;float:none;clear:both;}
}

<div class="a">a<br/>a<br/>a<br/>a</div>
<div class="b">b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/></div>
<div class="c">c<br/>c<br/>c<br/>c</div>

Answer 2

将min-height设置为全长等于。

div {
     width:48%;
     min-height:300px;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}