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

2023年1月31日 206次阅读

我有三个div：a,b和c.它们各自宽48％并显示为内联块.此样式将应用于多个页面. Div a总是比div b短.这会在a的底部和c的顶部之间产生间隙. (每个页面上的a和b的高度略有不同,但是a总是会更短.由于高度不一致,我觉得我不能可靠地使用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需要按此顺序排列的原因.

最佳答案 由于双重布局,有点棘手.保持相同的html布局你可以使用元素的选择器和另一个处理float和margin的“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>
点赞