我试图显示从容器 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 更新它们之后也是如此？
最佳答案
问题很容易解决。你只需要在你通过 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>
关于javascript - 证明 JavaScript 已更新父 div 元素内的子 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17643592/