親div要素内のJavaScriptの更新された子div要素の位置揃え

コンテナdiv要素の1つの辺から他の辺に均等に広がる3つのdiv要素を表示しようとしています。親div要素内のJavaScriptの更新された子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/

私は2つの質問があります。

JavaScriptを使用して子div要素の配置が変更されるのはなぜですか？
子div要素がJavaScriptで更新された後でも、コンテナdivの一方の端から他方の端に均等に広がるように、この問題を修正するにはどうすればよいですか？

出典

2013-07-14 Susam Pal

:ntch-childサポートを提供していないことに注意してください。あなたは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の間に空白がありません。テキスト（インライン）のように考えてください。 3つの文字を隣に置いて正当化したいのであれば、うまくいかないでしょう。それは1つの単語として扱われます。しかし、あなたがそれらの間にスペースを置くと、3つの別々の単語として扱われ、正当化されます。

あなたは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/）私はそれを嫌いますこのように振る舞うべきではないから... –

あなたは、あなたがそれらを持っているために、中央のdivにマージンとして、残りの10％を分散させることができ、30％であることをごdivの幅を定義している場合、私は、質問1のためではなく、質問2のための答えを持っていませんすべて均等に広がった。だから、text-align:justify;を取り除くと、これを使用することができます。

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

は* IE8と下位問題は簡単に修正され

Demo fiddle

出典

2013-07-14 21:35:54

親div要素内のJavaScriptの更新された子div要素の位置揃え

答えて

関連する問題