DOM通过JS插入时，使用行内块和文本对齐方式的DOM对象不会工作 [英] DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS

问题描述

我一直在试图实现Chris Coyier的inline-block + text justify解决方案，以便在给定的包装器宽度内自动分布div。 http://css-tricks.com/equidistant-objects-with-css/

当元素直接加载到DOM中但是由于某些原因在通过JS编程添加元素时失败。就像浏览器忽略css属性一样。

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

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

任何人都知道为什么会发生这种情况？

解决方案

这需要在元素之间有一些形式的空格，工作，请参阅： http://jsfiddle.net/NUJnZ/22/

请注意，在第三行中，DIV之间没有空格。

只要在 .before（''）和元素排列正确。 （如果使用 .after（''）在最后一个元素上有空格问题）

http://jsfiddle.net/NUJnZ/24/

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/

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.

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.

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?

解决方案

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

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.

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)

Updated fiddle: http://jsfiddle.net/NUJnZ/24/

这篇关于DOM通过JS插入时，使用行内块和文本对齐方式的DOM对象不会工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！