将inline-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

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

Answer 2

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