Justify JavaScript更新後的父div元素中的div div元素

我想顯示三個div元素從一個邊緣均勻分佈到容器div元素的另一個邊緣。Justify JavaScript更新後的父div元素中的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元素的位置會發生變化？
我們該如何解決這個問題，使得即使在用JavaScript更新之後，子div元素從容器div的一個邊緣均勻分散到其另一邊緣？

來源

2013-07-14 Susam Pal

的問題很容易解決。你只需要在通過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>

來源

2013-07-14 21:36:16 tw16

笑:)同樣的想法正確的[\ n演示（http://jsfiddle.net/b5gBM/22/）我恨它因爲它不應該像這樣...... – 2013-07-14 21:41:13

我沒有回答問題1，但對於問題2，如果您要定義div小號寬度爲30％，那麼就可以作爲保證金分配剩餘的10％的中間div來讓他們均勻分佈。所以，你可以擺脫text-align:justify;，並使用此：

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

*需要注意的是IE8，下不提供:ntch-child支持

Demo fiddle

來源

2013-07-14 21:35:54

Justify JavaScript更新後的父div元素中的div div元素

回答

相關問題