DOM通过JS插入时，内嵌块和文本对齐的等距离div将无法正常工作 [英] DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS

问题描述

我一直在试图实现Chris Coyier的内嵌块+文本对齐解决方案，以便在给定的包装宽度上自动分配div的水平。 http://css-tricks.com/equidistant-objects-with-css/

I have been trying to implement Chris Coyier's inline-block + text justify solution to automatically distribute div's horizontally in a given wrapper's width. http://css-tricks.com/equidistant-objects-with-css/

当元素被imedi loaded加载到DOM中时，这很有用，但是由于某些原因，通过JS以编程方式添加元素时，失败。就好像浏览器忽略了css属性。

This works great when the elements are imediately loaded into the DOM but for some reason fails when adding elements programattically through JS. It's as if the browser just ignores the css properties.

查看这个小提琴的一个非常基本的例子： http://jsfiddle.net/xmajox/NUJnZ/
前两行在HTML加载时添加。点击按钮在运行时通过JS添加更多。

Check out this fiddle for a very basic example: http://jsfiddle.net/xmajox/NUJnZ/ The first two rows are added on HTML load. Click the button to add more in run time through JS.

最初我以为可能会以某种方式与伪元素的使用相关：之后我尝试了一个不同的版本使用DOM节点： http://jsfiddle.net/xmajox/wnPSA/
不幸的是，它的反应是完全相同的。

Initially I thought it could be somehow related to the use of pseudo-element :after so I tried a different version with a DOM node instead: http://jsfiddle.net/xmajox/wnPSA/ Unfortunately it reacts exactly the same way.

任何人都知道为什么会发生这种情况？或者更好的是，如何解决/阻止它？

Anyone has any idea why this happens? or better yet, how to fix/prevent it?

推荐答案

需要一些形式的空格之间的元素为此工作，请看： http://jsfiddle.net/NUJnZ/22/

There needs to be some form of whitespace between the elements for this to work, see this: http://jsfiddle.net/NUJnZ/22/

注意在第三行DIV之间没有空格。当jQuery附加新元素时，没有前导或尾随空格。

Notice in the third row that there's no space between the DIVs. When jQuery appends the new element there's no leading or trailing whitespace.

只需添加一个尾随空格， .before（''）和元素排列正确。 （如果您使用 .after（''）最后一个元素有空格问题）

Simply add a trailing space with .before(' ') and the elements line up properly. (if you use .after(' ') there's a spacing issue on the last element)

更新小提琴： http://jsfiddle.net/NUJnZ/24/

这篇关于DOM通过JS插入时，内嵌块和文本对齐的等距离div将无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！