使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。