Giustifica gli elementi div child aggiornati di JavaScript all'interno di un elemento div genitore

Sto tentando di visualizzare tre elementi div distribuiti uniformemente da un bordo all'altro margine di un elemento div contenitore.Giustifica gli elementi div child aggiornati di JavaScript all'interno di un elemento div genitore

Ecco il codice HTML.

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

Ecco il codice 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; 
}

Questo funziona bene come si può vedere qui: http://jsfiddle.net/zVf4j/

Tuttavia, quando provo ad aggiornare il div contenitore utilizzando il seguente JavaScript, elementi del bambino div non è più sparsi da bordo a bordo del elemento div contenitore.

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

La proprietà text-align: justify; nei CSS sembra avere alcun effetto in questo caso. Il problema può essere visto qui: http://jsfiddle.net/b5gBM/

Ho due domande.

Perché il posizionamento degli elementi div child cambia quando vengono aggiornati con JavaScript?
Come possiamo risolvere questo problema in modo che gli elementi div child si distribuiscano uniformemente da un lato del contenitore div all'altro fino a quando non vengono aggiornati con JavaScript?

fonte

2013-07-14 Susam Pal

Il problema è facilmente risolto. Hai solo bisogno di aggiungere uno spazio dopo i div che stai aggiungendo tramite JS e vuoi giustificare. Demo Live: 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>'

Il problema è causato da spazi bianchi. Quando aggiunto tramite JS, non ci sono spazi bianchi tra i div. Pensaci come testo (in linea). Se metti tre lettere l'una accanto all'altra e vuoi giustificarle, non funzionerebbe. Sarebbe trattato come una parola. Ma quando metti uno spazio tra di loro, vengono trattate come tre parole separate e diventano giustificate.

È possibile visualizzare lo stesso problema senza JS. Se si scrive il codice senza spazi non si giustifica né: http://jsfiddle.net/zVf4j/1/

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

fonte

2013-07-14 21:36:16 tw16

lol :) stessa idea corretta per [\ n demo] (http://jsfiddle.net/b5gBM/22/) Odio perché non dovrebbe comportarsi così ... –

Non ho una risposta per la domanda 1, ma per la domanda 2, se si sta definendo il vostro div s di larghezza di essere al 30%, allora è possibile distribuire il restante 10% come margine al div mezzo di averli tutto uniformemente distribuito. Così si può sbarazzarsi di text-align:justify; e utilizzare questo:

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

* Si noti che IE8 e inferiore non forniscono il supporto :ntch-child

Demo fiddle

fonte

2013-07-14 21:35:54

Giustifica gli elementi div child aggiornati di JavaScript all'interno di un elemento div genitore

risposta

Problemi correlati