将嵌入式块DIV对齐到容器元素的顶部

小编典典

将嵌入式块DIV对齐到容器元素的顶部

css

当两个inline-block div高度不同时，为什么两个较短的高度不与容器顶部对齐？

.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容器的顶部对齐？

阅读 313

2020-05-16

共1个答案

小编典典

因为默认vertical-align设置为基线。

使用vertical-align:top来代替：

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

您也可以将其应用于float子元素。

2020-05-16