使用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).我犹豫使用a添加列的原因<div>是客户通过WYSIWYG编辑器输入了这个文本,因此我注入的任何元素都可能被后来或者莫名其妙地杀死.

Answer 1

使用 CSS3

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

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

浏览器支持

• Chrome 4.0+(-webkit-)
• IE 10.0+
• Firefox 2.0+(-moz-)
• Safari 3.1+(-webkit-)
• Opera 15.0+(-webkit-)

Answer 2

使用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 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; */ }

您还可以在段落之间插入clearer-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的方法,但对于生产网站而言,它并不实用.至少还没有.

Answer 4

这是一个简单的两列类的示例：

.two-col {
       -moz-column-count: 2;
       -moz-column-gap: 20px;
       -webkit-column-count: 2;
       -webkit-column-gap: 20px;
}

您可以将其中的一部分应用于文本块，如下所示：

<p class="two-col">Text</p>