使用CSS自动流动2列文字

  • Z时代
  • 2024-01-10
  • 分类：问答

我有类似于以下代码：

<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编辑器输入了此文本，因此我注入的任何元素很可能在以后或莫名其妙地被杀死。

回答：

创建第二列，然后将所需的元素移到该列中。

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

以上是 使用CSS自动流动2列文字 的全部内容， 来源链接： utcz.com/qa/403736.html

回到顶部