将内联块 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 ？

原文由 Hayi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

因为 vertical-align 默认设置为 _基线_。

使用 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 应用于子元素。

原文由 Lighty_46 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

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

原文由 michaelward82 发布，翻译遵循 CC BY-SA 3.0 许可协议