当jquery html（）被调用时，inline-block div向下移动

Question

请看一下这个jsfiddle：http://jsfiddle.net/NtxG9/1/

我有两个具有相同类的div，它们显示为内联块。 如果我拨打$('#parent1').html('some text');，它会向下移动。

有人会解释为什么会这样吗？

谢谢！

修改

感谢所有这些解决方案，但我仍然不清楚为什么会发生这种情况。 为什么更改div的内容会影响它的位置？

Answer 1

<强>解释

如果您在任何html元素中定义inline-block元素，则可以用来显示内联块，默认情况下baseline是vertical-align top，而不是定义为display:inline-block。< / p>

尝试使用

.parent {
    vertical-align:top;
}

Demo

Answer 2

您应该使用vertical-align: top;将所有内容对齐到顶部。

对于较旧的IE版本，您可能需要触发hasLayout：

/* For IE 7 */
zoom: 1;
*display: inline;

Answer 3

见这里 link

添加此css

float:left;

Answer 4

尝试将float：left属性添加到父类。它看起来像一个浮动的问题。我添加了这个属性，它工作正常。