Question

我想创建一个包含两列的div，文本会自动流入第二列。要做到这一点，我正在使用CSS3 column properties。当页面最初加载时，它会像它应该的那样工作，但是当我使用jQuery用新内容填充div时，列计数值为quadrates。

我试图尽可能地隔离问题，但行为保持不变：

CSS：

除了对列计数值进行平方之外，它还会对列顺序进行加扰。我用lorem ipsum句子编号来说明这个，顺序是1324而不是1234。

为什么这样做？我应该使用不同的jQuery方法来加载内容，还是可以以某种方式强制重绘div？

以防万一：这是我正在使用它的完整页面：

Answer 1

这是一个简单的问题（你需要替换这个div而不是附加到它上面）：

$("div.title-competency").load("resources.html .competencies #" + this.id + " .title-competency");

正在创建2个.title-competency div。

在ajax之前：

<div class="title-competency>
  <p>your text</p>
</div>

e.g。你的ajax加载后你有

<div class="title-competency>
  <div class="title-competency>
     <p>your text</p>
  </div>
</div>

你可以选择使用包装div，在这个SO问题中还有一些其他更黑的解决方案：How can I use jQuery.load to replace a div including the div