将内联块DIV与容器元素顶部对齐

Question

当两者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容器顶部的小？

Answer 1

因为默认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子元素.

Answer 2

您需要为vertical-align两个子div 添加一个属性.

如果.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;   
}

垂直对齐会影响内联或表格单元格,并且此属性有一个大的不同值的nubmer.有关更多详细信息,请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.