Javascript 浏览器忽略运行时生成的内容的正当性

在容器中均匀分布内容块的一个常见技巧是给它们一个

display:inline block

CSS属性，然后将

text align:justify

应用于父容器，以便：

<section>
  <div></div><!-- repeat X times -->
</section>

这在所有浏览器中都能正常工作，包括IE8+。最后一行恢复为左对齐，因为我没有设置

text align last

，这很好，Webkit stable也不支持

但是，如果现在开始使用Javascript生成额外的

div

元素，那么布局引擎似乎完全忘记了对齐

。我已经在Chrome beta版、Firefox最新版本、IE10和IE11中对此进行了测试，所有这些版本都首先将最后一行完全弄糟，根据之前可用的空间对生成的内容进行了半证明，然后将以下所有元素对齐

我在Firebug和IE/Chrome开发工具中尝试了一切，更改和重置了属性，但无法以任何方式触发“重新调整”-它们接受

text align:right

，但如果随后将其重置为

text align:justify

，它只会再次跳回左侧对齐。玩

空格

，

字母间距

和

单词间距

都没有明显的效果

就我所知，这也没有为这种行为提供任何理由（双关语）

---

这个问题有没有解决方法？

本质上，它需要在每个div之间留出一个空间，就像HTML中的div一样

因此，可以这样做（我不熟悉mootools，所以可能有一种更简单的方法）

---

请参阅（在FF和IE中完美，在Chrome中略微突出，这表明存在不同的问题。）

最后一行的内容对于对齐文本来说是正常的。由于一个段落的最后一行可能比其他行短，因此试图证明它的合理性在排版上看起来很奇怪。但是，动态生成的元素非常非常奇怪。更奇怪的是，它发生在所有浏览器中。哇，英雄-我完全忽略了这一点。这确实是一个用

.appendText（“”）

附加空格的问题。顺便说一下，请参见。非常奇怪的是，Chrome确实还差几个像素。啊，对了，忘了这一点。我想知道CSS是否有一种方法可以将每个元素视为一个“单词”，而不必添加空格Chrome@DaggNabbit几个月后，您应该能够普遍使用FlexBox来解决此问题，并结合.Wth，它在2个空格而不是1的情况下工作得很好，所以Chrome methinks中仍然存在某种缺陷。

section {
    text-align:justify;
}
div {
    width:200px;
    height:50px;
    display:inline-block;
}

(function(){
    $('root').grab(new Element('div'));
    $('root').grab(new Element('span', {
        'text': ' '
    }));
}).periodical(1000);