Bir JavaScript tanımlı alt üst öğenin içindeki JavaScript öğelerini güncelle

Bir kenardan bir kapsayıcı div öğesinin diğer kenarına düzgün şekilde yayılmış üç div öğeyi göstermeye çalışıyorum.Bir JavaScript tanımlı alt üst öğenin içindeki JavaScript öğelerini güncelle

İşte HTML kodu.

<body> 
    <div id="container" width="50%"> 
     <div>foo</div> 
     <div>bar</div> 
     <div>baz</div> 
     <div class="stretch"></div> 
    </div> 
</body>

İşte CSS kodu.

#container { 
    margin: 10%; 
    background: lightblue; 
    text-align: justify; 
} 

#container div { 
    display: inline-block; 
    width: 30%; 
    background: gray; 
} 

#container div.stretch { 
    width: 100%; 
    height: 0; 
}

burada görülebileceği gibi bu iyi çalışır: Aşağıdaki JavaScript kullanarak kapsayıcı div güncelleştirmeye çalıştığınızda http://jsfiddle.net/zVf4j/

Ancak, çocuğun div öğeleri artık kenarına kenarından yaymak konteyner div öğesi.

var containerDiv = document.getElementById('container') 
containerDiv.innerHTML = 
    '<div>fox</div>' + 
    '<div>bay</div>' + 
    '<div>baz</div>' + 
    '<div class="stretch"></div>'

CSS'deki text-align: justify; özellik bu durumda hiçbir etkisi var gibi gözüküyor. Sorun şu şekilde görülebilir: http://jsfiddle.net/b5gBM/

İki sorum var.

Çocuk div öğelerinin yerleşimi, JavaScript ile güncellendiğinde neden değişir?
Bu sorunu nasıl düzeltebiliriz, böylece çocuk div öğeleri JavaScript ile güncellendikten sonra bile konteyner divunun bir kenarından eşit kenarına yayılırlar?

kaynak

2013-07-14 Susam Pal

:ntch-child destek sağlamaz unutmayın. JS ile eklediğiniz div'lardan sonra bir boşluk eklemeniz ve gerekçelendirmek istediğinizde. Canlı Demo: Sorun boşluk kaynaklanır 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 ile eklendiğinde, div'ler arasında boşluk yoktur. Metin gibi düşün (inline). Yan yana üç harf koyar ve onları haklı göstermek isterse, işe yaramaz. Tek kelime olarak ele alınacaktır. Ama aralarında bir boşluk koyduğunuzda, üç ayrı sözcük olarak ele alınırlar ve haklı çıkarlar.

Aynı sorunu JS olmadan da görebilirsiniz. Eğer herhangi bir boşluk bırakmadan kod yazarsanız o da haklı olmaz: http://jsfiddle.net/zVf4j/1/

<div>foo</div><div>bar</div><div>baz</div>

kaynak

2013-07-14 21:36:16 tw16

lol :) aynı fikri için doğru [\ n demo] (http://jsfiddle.net/b5gBM/22/) Nefret çünkü böyle davranmamalı ... –

o zaman onlara sahip olmak orta div marjı olarak kalan% 10 dağıtabilir% 30 olmasını div s genişliğini tanımlıyorsanız ben söz 1 için değil, soru 2 için bir cevap yok Hepsi eşit dağılmış. Yani text-align:justify; kurtulmak ve bu kullanabilirsiniz:

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

* IE8 ve alt problemi kolayca sabitlenir

Demo fiddle

kaynak

2013-07-14 21:35:54

Bir JavaScript tanımlı alt üst öğenin içindeki JavaScript öğelerini güncelle

cevap

İlgili konular