div元素在包含文本时被下推。内联块的一种特殊行为

Question

为什么第一个元素在其子元素包含文本时被推下？为什么内联块的行为是这样的？

我怎样才能让div并排，同时允许他们生孩子？我希望灰色框有一个元素列表一个在另一个上面，同时仍然像这样对齐一切（如果框不包含子项，它可以正常工作）：

The example is here: http://jsfiddle.net/uwRwM/1/

.box {
display: inline-block;
}

Answer 1

轻松修复。添加overflow:hidden。

这将强制元素包含文本。

.box {
    overflow:hidden;
}

Working jsFiddle demo

或者，您可以设置vertical-align:top。

.box {
    vertical-align:top;
}

Working jsFiddle demo

发生这种情况的原因是因为inline-block元素的默认垂直对齐方式为baseline。因此，它是在底部的原因。