当两个inline-block
div
s具有不同的高度时,为什么两个中的较短者不对齐容器的顶部?(演示):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
如何对齐div
容器顶部的小?
发布于 2019-06-21 12:59:24
因为默认vertical-align
设置为基线。
vertical-align:top
改为使用:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top;
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
或者@ f00644表示你也可以申请float
子元素。
https://stackoverflow.com/questions/-100007033
复制相似问题