将inline-block的DIV元素对齐到容器元素的顶部
P粉682987577
2023-08-21 20:17:02
<p>当两个<code>inline-block</code>的<code>div</code>具有不同的高度时,为什么较短的一个不能与容器的顶部对齐?(<strong>DEMO</strong>):</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="small"></div>
<div class="big"></div>
</div></pre>
<p><br /></p>
<p>如何将小的<code>div</code>与其容器的顶部对齐?</p>
您需要为两个子div添加
vertical-align
属性。如果
.small
始终较短,则只需将该属性应用于.small
。 然而,如果任何一个可能是最高的,则应将该属性应用于.small
和.big
。垂直对齐影响行内或表格单元格框,该属性有许多不同的值。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align了解更多详情。
因为默认情况下,
vertical-align
设置为baseline。改用
vertical-align:top
代替:http://jsfiddle.net/Lighty_46/RHM5L/9/
或者如@f00644所说,您也可以对子元素应用
float
。