javascript - 文本对齐 : justify not working on dynamically created content

Question

我正在尝试使用 text-align:justify 和 display:inline-block，如 this post 中所述为一些动态创建的元素设置样式。在用头撞墙检查 CSS 冲突后，我终于意识到这是在创建内容后没有重新评估对齐方式。我想知道是否有人知道解决这个问题的方法。有没有办法强制在动态创建的元素上重新评估样式？

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

这是一个 jsfiddle example为了显示。请注意硬编码元素是如何对齐的，而动态创建的元素则不是。

Answer 1

只需在动态创建的div 后添加一个空格 ;)

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

祝你好运!

编辑

这样更好

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

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