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