css - 将行内 block DIV 对齐到容器元素的顶部

Question

当两个 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 对齐到其容器的顶部？

Answer 1

因为 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 应用于子元素。