将inline-block的DIV元素对齐到容器元素的顶部
P粉682987577
P粉682987577 2023-08-21 20:17:02
0
2
378
<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>
P粉682987577
P粉682987577

全部回复(2)
P粉786432579

您需要为两个子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了解更多详情。

P粉744831602

因为默认情况下,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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板