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

当两个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默认设置为基线。

使用vertical-align:top代替：

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

http://jsfiddle.net/Lighty_46/RHM5L/9/

或者如@f00644所述，您也可以将float应用于子元素。

关于css - 将嵌入式块DIV对齐到容器元素的顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50553700/