文本对齐:不使用动态创建的内容

I'm trying use text-align:justify and display:inline-block as described in this post to style some dynamically created elements. After banging my head against the wall checking for CSS conflicts, I finally realized that it was that the alignment wasn't being re-evaluated after the content was created. I'm wondering if anybody knows a work-around for this. Is there a way to force styles to be re-evaluated on a dynamically created element?

我正在尝试使用文本对齐方式:说明和显示:在本文中描述的inline-block，用于创建一些动态创建的元素。在我的头撞到墙上检查CSS冲突之后，我终于意识到，在创建内容之后，并没有对对齐进行重新评估。我想知道是否有人知道如何解决这个问题。是否有一种方法可以强制在动态创建的元素上重新评估样式?

EDIT - HTML:

编辑- 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>");
}

Here's a jsfiddle example to illustrate. Notice how the hard-coded elements are justified, while the dynamically created ones aren't.

下面是一个jsfiddle示例。注意硬编码元素是如何被证明的，而动态创建的元素不是。

1 个解决方案

#1

Just add a space after dynamically created div ;)

在动态创建div之后添加一个空格即可)

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

Have phun!

phun !

Edit

编辑

This is better

这是更好的

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

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

#1