添加内容时，Div位置移动 [英] Div position shifts when adding content

问题描述

昨天的问题（ DOM内联块与inline-blocks和text justify将无法正常插入通过JS ）

在这里更新的小提琴： http://jsfiddle.net/xmajox/NUJnZ/

Updated fiddle in here: http://jsfiddle.net/xmajox/NUJnZ/

当任何类型的内容添加（块或内联）到他们向下移动的div。

When any kind of content is added (block or inline) to the divs they shift down. When all divs have content, they magically move back into their correct places.

我尝试使用一些虚拟内容div开始它们，然后只是改变孩子的文本，但它反应

I tried starting them all with some dummy content div and then just changing that children's text but it reacts the same way.

任何想法？

推荐答案

c $ c> vertical-align：top 到这些div的：

Add vertical-align: top to these div's:

.rowSample > div {
    background: none repeat scroll 0 0 black;
    border: 1px solid yellow;
    color: white;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

因为这些是的元素display：inline-block ，它们作为内联元素对齐，但具有显式维度。例如，< img> 标签默认具有 inline-block 显示模式，必须指定所需的 vertical-align 属性。

Because these are elements with display:inline-block they are aligned as inline elements but have explicit dimensions. For example, <img> tags by default have inline-block display mode, so to align them inside text you have to specify a desired vertical-align property.

请看看示例： =http://jsfiddle.net/a6Hu2/> http://jsfiddle.net/a6Hu2/

Please take a look at the example fiddle: http://jsfiddle.net/a6Hu2/

这篇关于添加内容时，Div位置移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！