Sus*_*Pal 5 html javascript css
我试图显示从容器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>'
text-align: justify;在这种情况下,CSS中的属性似乎没有任何效果.这个问题可以在这里看到:http://jsfiddle.net/b5gBM/
我有两个问题.
这个问题很容易解决。您只需要在通过 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>
| 归档时间： |
|
| 查看次数： |
611 次 |
| 最近记录： |