gpt4 book ai didi

javascript - 证明 JavaScript 已更新父 div 元素内的子 div 元素

转载 作者:太空狗 更新时间:2023-10-29 16:07:29 24 4
gpt4 key购买 nike

我试图显示从容器 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/

我有两个问题。

  1. 为什么使用 JavaScript 更新子 div 元素的位置会发生变化?
  2. 我们如何解决这个问题,使子 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com