Question

我试图显示从容器div元素的一个边缘到另一个边缘均匀展开的三个div元素。

这是HTML代码。

<body>
    <div id="container" width="50%">
        <div>foo</div>
        <div>bar</div>
        <div>baz</div>
        <div class="stretch"></div>
    </div>
</body>

这是CSS代码。

#container {
    margin: 10%;
    background: lightblue;
    text-align: justify;
}

#container div {
    display: inline-block;
    width: 30%;
    background: gray;
}

#container div.stretch {
    width: 100%;
    height: 0;
}

这可以正常工作，如下所示：http://jsfiddle.net/zVf4j/

但是，当我尝试使用以下JavaScript更新容器div时，子div元素不再从容器div元素的边缘展开。

var containerDiv = document.getElementById('container')
containerDiv.innerHTML =
    '<div>fox</div>' +
    '<div>bay</div>' +
    '<div>baz</div>' +
    '<div class="stretch"></div>'

CSS中的text-align: justify;属性似乎在这种情况下无效。这个问题可以在这里看到：http://jsfiddle.net/b5gBM/

我有两个问题。

为什么使用JavaScript更新子div元素的位置会发生变化？
我们如何解决这个问题，以便将子div元素从容器div的一个边缘均匀分布到另一个边缘，即使它们是用JavaScript更新的？

Answer 1

问题很容易解决。你只需要在通过JS添加的div之后添加一个空格并想要证明。现场演示：http://jsfiddle.net/b5gBM/9/

var containerDiv = document.getElementById('container')
containerDiv.innerHTML =
    '<div>fox</div> ' +
    '<div>bay</div> ' +
    '<div>baz</div> ' +
    '<div class="stretch"></div>'

问题是由空格引起的。通过JS添加时，div之间没有空格。把它想象成文本（内联）。如果你把三个字母放在一起并想要证明它们是正确的，那就不行了。它将被视为一个词。但是当你在它们之间放置一个空格时，它们会被视为三个单独的单词，并且会被证明是合理的。

没有JS，你可以看到同样的问题。如果您编写的代码没有任何空格，则无法证明：http://jsfiddle.net/zVf4j/1/

<div>foo</div><div>bar</div><div>baz</div>

Answer 2

我对问题1没有答案，但对于问题2，如果您将div的宽度定义为30％，那么您可以将剩余的10％作为保证金分配给中间div它们均匀分散开来。所以你可以摆脱text-align:justify;并使用它：

#container div:nth-child(2) {
    margin: 0 5%;
}

*请注意，IE8及更低版本不提供:ntch-child支持

<强> Demo fiddle

Justify JavaScript更新了父div元素中的子div元素

2 个答案: