使用 CSS 自动处理 2 列文本

IT技术 javascript html css two-columns
2021-03-15 07:15:24

我有类似于以下的代码：

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

6个回答

利用 CSS3

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

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

浏览器支持

  • 铬 4.0+ ( -webkit-)
  • 浏览器 10.0+
  • 火狐 2.0+ ( -moz-)
  • Safari 3.1+ ( -webkit-)
  • 歌剧 15.0+ ( -webkit-)
实际上，唯一可能的用法是-webkit-column-count和-moz-column-count，具体取决于浏览器（在此处查看：caniuse.com/#search=column-count）。不幸的是，这对我来说还不够，因为 webkit 在打印媒体类型中删除了这些设置......
2021-04-19 07:15:24
我认为 2013 年这是一个很好的答案，也许在 2010 年没有很多浏览器支持..
2021-04-25 07:15:24
2015 年所有主流浏览器的最佳解决方案，无需 Javascript (y)
2021-05-03 07:15:24
我打算提出同样的建议，但哪些浏览器支持这一点？我假设没有多少。这是 webkit 支持的浏览器的链接：css3.info/preview/multi-column-layout
2021-05-09 07:15:24
请注意，当文本转到下一列的部分有换行符时，这不会很好地工作。它有效，但第二列看起来没有对齐，因为第一行是换行符。
2021-05-11 07:15:24

使用 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/

笔记！现在对此有很好的 CSS3 支持（即使在 IE 中），请参阅下面的下一个答案。
2021-05-04 07:15:24
除了动态创建列容器的问题（我可以在 jQuery 中完成），这假设每个段落中的内容大小大致相等，但情况似乎并非如此。这将使一列可能比另一列短得多。
2021-05-08 07:15:24

目前仅使用 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; }

方法二：当文本是连续的

更高级，但可以做到。

<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 的人来说，这也会优雅地降级。如果这是一个选项，第三个选项是让所有这些拆分成列的操作发生在服务器端。

（方法三：CSS3多列布局module）

您可能会阅读CSS3 的做法，但它对于生产网站来说并不实用。至少还没有。

列实际上是有序的，不幸的是，我不能指望它们不会破坏 contentColumn 容器（实际上我希望它们会被破坏）。出于显而易见的原因，CSS3 不是一个选项，所以仍然卡住了。
2021-04-18 07:15:24
也许您应该考虑删除整个列概念？会让你和你的客户更轻松;-)
2021-04-30 07:15:24
我想是的。当时，还没有那么多，因为它在过去的那些老式浏览器中并没有得到广泛支持。
2021-05-02 07:15:24
为什么在 2010 年“对于生产网站来说还不实用”？现在很实用，2019年，不是吗？
2021-05-08 07:15:24

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

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

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

<p class="two-col">Text</p>
你忘记了 IE10+ :-o
2021-05-12 07:15:24

不是这里的专家，但这就是我所做的并且有效

<html>
<style>
/*Style your div container, must specify height*/
.content {width:1000px; height:210px; margin:20px auto; font-size:16px;}
/*Style the p tag inside your div container with half the with of your container, and float left*/
.content p {width:490px; margin-right:10px; float:left;}
</style>

<body>
<!--Put your text inside a div with a class-->
<div class="content">
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida laoreet lectus. Pellentesque ultrices consequat placerat. Etiam luctus euismod tempus. In sed eros dignissim tortor faucibus dapibus ut non neque. Ut ante odio, luctus eu pharetra vitae, consequat sit amet nunc. Aenean dolor felis, fringilla sagittis hendrerit vel, egestas eget eros. Mauris suscipit bibendum massa, nec mattis lorem dignissim sit amet. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dolor neque. Phasellus tellus odio, egestas ut blandit sed, egestas sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>     
</body>
</html>

一旦<p>标签内的文本达到容器 div 的高度，其他文本将流向容器的右侧。

其它你可能感兴趣的问题
上一篇将 jQuery 日期选择器应用于多个实例 下一篇负前瞻正则表达式