html - 为什么这个 CSS 会出现？

Question

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

这是一切正常的小提琴。

这是所有混乱（内容）的小提琴。

有人可以告诉我为什么会这样以及如何解决吗？

我已经做了几个小时，但似乎无法弄清楚。任何帮助深表感谢。

Answer 1

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

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

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

Answer 2

添加vertical-align:top到框中。