Question

在容器中均匀分发内容块的一个常见技巧是为它们提供display:inline-block CSS属性，然后将text-align:justify应用于父容器，因此：

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

和CSS：

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

这适用于所有浏览器，包括IE8 +，as shown in this sample Fiddle。最后一行恢复为左对齐，因为我没有设置text-align-last，这很好，并且无论如何都不受Webkit稳定支持。

但是，如果您现在开始使用Javascript生成其他div元素，布局引擎似乎完全忘记了理由。

Refer to this second Fiddle which includes a periodical function adding a div every second。我已经在Chrome测试版，Firefox最新版，IE10版和IE11版中对此进行了测试 - 所有这些版本都首先完全搞砸了最后一行，根据之前可用的空间对生成的内容进行了半合理调整，然后左对齐所有后续元素。

我已尝试使用Firebug和IE / Chrome开发工具中的所有内容，更改和重置属性，但无法以任何方式触发“重新调整” - 他们接受text-align:right，但如果您将其重置为{ {1}}它再次跳回左对齐。使用text-align:justify，white-space和letter-spacing进行游戏时效果不明显。

就我所见，relevant section in the W3 CSS standards没有为这种行为提供任何理由（双关语）。

此问题是否有任何修复或解决方法？

Answer 1

从本质上讲，它需要每个div之间的空格，就像HTML中的空格一样。

所以做一些事情（我不熟悉mootools所以可能有一个更简单的方法）

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

请参阅http://jsfiddle.net/AdLuT/1/（完美的FF和IE，在Chrome中稍微有点，这表明存在不同的问题。）

浏览器忽略运行时生成内容的理由

1 个答案: