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

概述我有三个div：a,b和c.它们各自宽48％并显示为内联块.此样式将应用于多个页面. Div a总是比div b短.这会在a的底部和c的顶部之间产生间隙. (每个页面上的a和b的高度略有不同,但是a总是会更短.由于高度不一致,我觉得我不能可靠地使用margin-top：例如-10px.) 怎么样： 我多么想要： 编辑 移动： /编辑 CSS div { width:48%; b 我有三个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 >a<br>a</div><div >b<br>b<br>b<br>b<br>b<br>b<br>b<br>b</div><div >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 >a<br/>a<br/>a<br/>a</div><div >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 >c<br/>c<br/>c<br/>c</div>

总结

以上是内存溢出为你收集整理的html – display：inline-block：第一个div比第二个短;填补那个空间全部内容，希望文章能够帮你解决html – display：inline-block：第一个div比第二个短;填补那个空间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。