jquery - 调用 jquery html() 时，内联块 div 向下移动

Question

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

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

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

谢谢！

编辑

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

Answer 1

解释：

您可以使用显示内联块，这意味着如果您在任何 html 元素中定义元素，则默认情况inline-block下baseline比定义为始终。vertical-align topdisplay:inline-block

尝试使用

.parent {
    vertical-align:top;
}

演示

Answer 2

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

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

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

Answer 3

尝试将 float:left 属性添加到父类。它看起来是一个浮动问题。我添加了这个属性，它工作得很好。

Answer 4

看这里 链接

添加这个CSS

float:left;