使inline-block的DIV在容器元素頂部對齊

Question

當兩個inline-block的div的高度不同時，為什麼較短的不會與容器的頂部對齊？ （DEMO）：.container{border:1pxblacksolid;width:320px;height:120px;}.small{display:inline-block;width:40%;height:30%;border:1pxblacksolidbackground:aliceblue;background:aliceblue

P粉203792468 · Answer

您需要為兩個子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以了解更多詳情。

P粉823268006 · Answer

因為預設情況下，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。