当两个inline-block的div具有不同的高度时，为什么较短的一个不能与容器的顶部对齐？（DEMO）：
2
815.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与其容器的顶部对齐？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
您需要为两个子div添加
vertical-align属性。如果
.small始终较短，则只需将该属性应用于.small。 然而，如果任何一个可能是最高的，则应将该属性应用于.small和.big。.container{ border: 1px black solid; width: 320px; height: 120px; } .small{ display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; vertical-align: top; } .big { display: inline-block; border: 1px black solid; width: 40%; height: 50%; background: beige; vertical-align: top; }垂直对齐影响行内或表格单元格框，该属性有许多不同的值。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align了解更多详情。
因为默认情况下，
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。