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