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

Question

为什么第一个元素在其子元素包含文本时被推下？为什么内联块表现得像这样？

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

这个例子在这里:http://jsfiddle.net/uwRwM/1/

.box {
display: inline-block;
}

Answer 1

Easy fix. Add overflow:hidden.

This will force the element to contain the text.

.box {
    overflow:hidden;
}

Working jsFiddle demo

Alternatively, you can set vertical-align:top.

.box {
    vertical-align:top;
}

Working jsFiddle demo

The reason this is occurring, is because the default vertical alignment of an inline-block element is baseline. Thus the reason it was on the bottom.