Text-align: justify arbeitet nicht an dynamisch erstelltem Inhalt

Question

Ich versuche, Text-Align: zu verwenden und anzuzeigen: Inline-Block wie in this post beschrieben, um einige dynamisch erstellte Elemente zu stylen. Nachdem ich meinen Kopf gegen die Wand gestoßen und nach CSS-Konflikten gesucht hatte, wurde mir klar, dass die Ausrichtung nach der Erstellung des Inhalts nicht neu bewertet wurde. Ich frage mich, ob jemand dafür einen Workaround kennt. Gibt es eine Möglichkeit, Stile zu erzwingen, die auf einem dynamisch erstellten Element neu bewertet werden?

EDIT - HTML:

<div id="container" class="flush"> 

</div> 

<div class="flush"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

CSS:

.flush{ 
text-align: justify; 
width: 500px; 
height: 250px; 
background: #00f; 
} 

.flush div{ 
display: inline-block; 
width: 101px; 
height: 100px; 
background: #f00; 
} 

JS:

for(var i = 0; i<5; i++){ 
    $('#container').append("<div></div>"); 
} 

Hier ist eine jsfiddle example zu illustrieren. Beachten Sie, dass die hartcodierten Elemente gerechtfertigt sind, während die dynamisch erstellten Elemente dies nicht sind.

Answer 1

Fügen Sie einfach ein space nach dynamisch div erstellt;)

$('#container').append("<div></div> "); 

phun haben!

bearbeiten

Das ist besser

$('#container').append("<div></div>\n\r"); 

http://jsfiddle.net/ergec/4pswV/