文本对齐:证明无法处理动态创建的内容 [英] Text-align: justify not working on dynamically created content

问题描述

我正在尝试使用text-align:justify和display:inline-block，如

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?

编辑- 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示例进行说明.请注意，硬编码元素是如何合理化的，而动态创建的元素则没有合理性.

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

推荐答案

只需在动态创建div之后添加space;)

Just add a space after dynamically created div ;)

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

有福了！

修改

这更好

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

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

这篇关于文本对齐:证明无法处理动态创建的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！