使用 CSS 自动排列 2 列文本

Question

我有类似于以下的代码：

 <p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>

如果可能的话，我想在没有标记的情况下使此文本流入两列（左侧 1-3，右侧 4-6）。我对使用 <div> 添加列犹豫不决的原因是，此文本是由客户端通过 WYSIWYG 编辑器输入的，因此我注入的任何元素都可能稍后或莫名其妙地被杀死。

原文由 Joe Mastey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 jQuery

创建第二列并将所需的元素移入其中。

 <script type="text/javascript">
  $(document).ready(function() {
    var size = $("#data > p").size();
 $(".Column1 > p").each(function(index){
  if (index >= size/2){
   $(this).appendTo("#Column2");
  }
 });
  });
</script>

<div id="data" class="Column1" style="float:left;width:300px;">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>

更新：

或者 因为现在的要求是让它们大小相等。我建议使用预构建的 jQuery 插件： Columnizer jQuery Plugin

http://jsfiddle.net/dPUmZ/1/

原文由 Glennular 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 CSS3 的多列布局：

 .container {
    column-count: 2;
    column-gap: 20px;
}

---

浏览器支持（无前缀）：

• 铬 50
• 火狐 52
• 野生动物园 9
• 边缘 12
• 歌剧 11.5
• 浏览器 10

原文由 Glennular 发布，翻译遵循 CC BY-SA 4.0 许可协议