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

Question

I am trying to display three div elements spread out uniformly from one edge to the other edge of a container div element. 我试图显示从容器div元素的一个边缘到另一个边缘均匀展开的三个div元素。

Here is the HTML code. 这是HTML代码。

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

Here is the CSS code. 这是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;
}

This works fine as can be seen here: http://jsfiddle.net/zVf4j/ 这可以正常工作，如下所示： http ： //jsfiddle.net/zVf4j/

However, when I try to update the container div using the following JavaScript, the child div elements no longer spread out from edge to edge of the container div element. 但是，当我尝试使用以下JavaScript更新容器div时，子div元素不再从容器div元素的边缘展开。

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

The text-align: justify; text-align: justify; property in CSS seems to have no effect in this case. 在这种情况下，CSS中的属性似乎没有任何效果。 The issue can be seen here: http://jsfiddle.net/b5gBM/ 这个问题可以在这里看到： http ： //jsfiddle.net/b5gBM/

I have two questions. 我有两个问题。

Why does the placement of the child div elements change when they are updated with JavaScript? 为什么使用JavaScript更新子div元素的位置会发生变化？
How can we fix this issue so that the child div elements evenly spread out from one edge of the container div to its other edge even after they are updated with JavaScript? 我们如何解决这个问题，以便将子div元素从容器div的一个边缘均匀地分散到另一个边缘，即使它们是用JavaScript更新的？

Answer 1

The problem is easily fixed. 问题很容易解决。 You just need to add a space after the divs you are adding through JS and want to justify. 你只需要在通过JS添加的div之后添加一个空格并想要证明。 Live Demo: http://jsfiddle.net/b5gBM/9/ 现场演示： 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>'

The issue is caused by whitespace. 问题是由空格引起的。 When added through JS, there is no whitespace between the divs. 通过JS添加时，div之间没有空格。 Think about it like text (inline). 把它想象成文本（内联）。 If you put three letters next to each other and wanted to justify them, it wouldn't work. 如果你把三个字母放在一起并想要证明它们是正确的，那就不行了。 It would be treated as one word. 它将被视为一个词。 But when you put a space between them, then they're treated as three separate words and would become justified. 但是当你在它们之间放置一个空格时，它们会被视为三个单独的单词，并且会被证明是合理的。

You can see the same issue without JS. 没有JS，你可以看到同样的问题。 If you write the code without any spaces it will not justify either: http://jsfiddle.net/zVf4j/1/ 如果您编写的代码没有任何空格，则无法证明： http ： //jsfiddle.net/zVf4j/1/

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

Answer 2

I don't have an answer for question 1 but for question 2, if you are defining your div s width to be 30% then you can distribute the remaining 10% as margin to the middle div to have them all evenly spread out. 我没有对问题1的答案，但对于问题2，如果你将你的div宽度定义为30％，那么你可以将余下的10％作为边缘分配到中间div以使它们均匀分布。 So you can get rid of text-align:justify; 所以你可以摆脱text-align:justify; and use this: 并使用这个：

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

*Note that IE8 and lower don't provide :ntch-child support *请注意，IE8及更低版本不提供:ntch-child支持

Demo fiddle 演示小提琴

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-07-14 21:36:16

解决方案2
0 2013-07-14 21:35:54

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-07-14 21:36:16

解决方案2 0 2013-07-14 21:35:54

解决方案1
3 已采纳 2013-07-14 21:36:16

解决方案2
0 2013-07-14 21:35:54