使用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>添加一个列，是因为这个文本是由客户端通过所见即所得编辑器输入的，所以我注入的任何元素都可能在稍后或莫名其妙地被杀死。

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/

Answer 2

使用CSS3

.container {
   -webkit-column-count: 2;
      -moz-column-count: 2;
           column-count: 2;

   -webkit-column-gap: 20px;
      -moz-column-gap: 20px;
           column-gap: 20px;
}

浏览器支持

(-webkit-)

• IE (-moz-)

• Safari (-webkit-)

• Opera (-webkit-)

• Chrome 4.0+ 10.0+
• Firefox 2.0+ 3.1+ 15.0+

Answer 3

目前，只有在CSS/HTML中，才能自动浮动彼此相邻的两列。有两种方法可以实现这一点：

方法1:当没有连续的文本，只有大量不相关的段落时：

将所有段落向左浮动，使它们的宽度为包含元素的一半，如果可能，设置固定的高度。

<div id="container">
  <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>
</div>

#container { width: 600px; }
#container p { float: left; width: 300px; /* possibly also height: 300px; */ }

您还可以在段落之间插入较清晰的div，以避免使用固定的高度。如果你想要两列，在两段和两段之间添加一个更清晰的-div。这将对齐下两个段落的顶部，使其看起来更整洁。示例：

<div id="container">
  <p>This is paragraph 1. Lorem ipsum ... </p>
  <p>This is paragraph 2. Lorem ipsum ... </p>
  <div class="clear"></div>
  <p>This is paragraph 3. Lorem ipsum ... </p>
  <p>This is paragraph 4. Lorem ipsum ... </p>
  <div class="clear"></div>
  <p>This is paragraph 5. Lorem ipsum ... </p>
  <p>This is paragraph 6. Lorem ipsum ... </p>
</div>

/* in addition to the above CSS */
.clear { clear: both; height: 0; }

方法2:当文本连续时

更高级，但这是可以做到的。

<div id="container">
  <div class="contentColumn">
    <p>This is paragraph 1. Lorem ipsum ... </p>
    <p>This is paragraph 2. Lorem ipsum ... </p>
    <p>This is paragraph 3. Lorem ipsum ... </p>
  </div>
  <div class="contentColumn">
    <p>This is paragraph 4. Lorem ipsum ... </p>
    <p>This is paragraph 5. Lorem ipsum ... </p>
    <p>This is paragraph 6. Lorem ipsum ... </p>
  </div>
</div>

.contentColumn { width: 300px; float: left; }
#container { width: 600px; }

当涉及到易用性时:对于非技术客户端来说，这些都不是真正容易的。您可以尝试向他/她解释如何正确执行此操作，并告诉他/她为什么。如果客户端将来要通过WYSIWYG编辑器更新网页，那么学习非常基础的HTML不失为一个好主意。

或者，您可以尝试实现一些Javascript解决方案，该解决方案计算段落的总数，将段落一分为二，然后创建列。对于那些禁用了JavaScript的人来说，这也会优雅地降级。第三个选项是让所有这些拆分为列的操作在服务器端发生(如果这是一个选项)。

(方法3: CSS3多列布局模块)

您可能读到过CSS3 way of doing it，但对于生产网站来说，它并不实用。至少现在还不是。