使用CSS自动流动2列文本 [英] flow 2 columns of text automatically with CSS

问题描述

我的代码类似于以下内容：

I have the code similar to the following:

<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>

我想要，如果可能的话，没有标记，导致这个文本流入两列-3在左边，4-6在右边）。我使用< div> 添加列的犹豫的原因是这个文本由客户端通过WYSIWYG编辑器输入，因此我注入的任何元素都可能

I'd like to, without markup if possible, cause this text to flow into two columns (1-3 on the left, 4-6 on the right). The reason for my hesitation to add a column using a <div> is that this text is entered by the client via a WYSIWYG editor, so any elements I inject are likely to be killed later or inexplicably.

推荐答案

使用jQuery

创建第二列并移动所需的元素。

Create a second column and move over the elements you need into it.

<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插件

Or Since the requirement now is to have them equally sized. I would suggest using the prebuilt jQuery plugins: Columnizer jQuery Plugin

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

这篇关于使用CSS自动流动2列文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！