为什么这个 CSS 会出现？

Question

我有一个非常基本的容器，里面有几个孩子divs，显示为inline-block。在我真正将内容插入到子 div 中之前，一切正常。当我在其中包含内容时，它们似乎无缘无故地向下移动。

Here 是这一切运作良好的关键。

而here 就是把这一切都搞砸了（内容）。

谁能告诉我为什么会发生这种情况以及如何解决它？

我已经研究了几个小时，但似乎无法弄清楚。非常感谢任何帮助。

Answer 1

不要使用display: inline-block，而是使用display: block; float: left;

http://jsfiddle.net/GtPWX/2/

或者你可以在盒子上设置vertical-align: top。

Answer 2

将vertical-align:top 添加到框中。