当两个 inline-block
div
具有不同的高度时,为什么两者中较短的一个不与容器顶部对齐? ( DEMO ):
.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
对齐到其容器的顶部?
最佳答案
因为 vertical-align
默认设置为 baseline。
改用vertical-align:top
:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
或作为 @f00644说您也可以将 float
应用于子元素。
关于css - 将行内 block DIV 对齐到容器元素的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59264392/