【问题标题】：flow 2 columns of text automatically with CSS使用 CSS 自动排列 2 列文本
【发布时间】：2011-03-01 21:08:45
【问题描述】：

我有类似下面的代码：

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

【问题讨论】：

如果你给他们上课，它会工作，但我认为你会遇到与所见即所得编辑器相同的问题
JavaScript 解决方案怎么样？计算节点并将一半放入 2 个创建的 div 中？
我不喜欢 JS 用于排版的想法，但这可能是迄今为止最可行的解决方案。也会优雅地降级。

标签： javascript html css two-columns

【解决方案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-)

【讨论】：

我打算提出同样的建议，但哪些浏览器支持这个？我假设不多。这是 webkit 支持的浏览器的链接：css3.info/preview/multi-column-layout
我认为对于 2013 年来说这是一个很好的答案，也许早在 2010 年就没有很多浏览器支持了..
实际上唯一可能的用法是 -webkit-column-count 和 -moz-column-count 取决于浏览器（在这里查看： caniuse.com/#search=column-count)。不幸的是，这对我来说还不够，因为 webkit 在印刷媒体类型中删除了这些设置......
2015 年所有主流浏览器的最佳解决方案，不涉及 Javascript (y)
请注意，当文本转到下一列的部分中有换行符时，这不会很好地工作。它可以工作，但由于第一行是换行符，因此第二列看起来会错位。

【解决方案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/

【讨论】：

除了动态创建列容器的问题（我可以在 jQuery 中完成）之外，这假设每个段落中的内容大小大致相等，但似乎并非如此。这会使一列可能比另一列短得多。
注意！现在有很好的 CSS3 支持（即使在 IE 中），请参阅下面的下一个答案。

【解决方案3】：

目前仅使用 CSS/HTML 无法自动浮动相邻的两列。实现此目的的两种方法：

方法一：没有连续文字，只有很多不相关的段落：

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

<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 以避免使用固定高度。如果您想要 two 列，请在两个和两个段落之间添加一个 clearer-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; }

谈到易用性：对于非技术客户来说，这些都不是一件容易的事。你可以尝试向他/她解释如何正确地做到这一点，并告诉他/她为什么。如果客户将来要通过所见即所得的编辑器更新网页，那么学习非常基本的 HTML 无论如何都不是一个坏主意。

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

（方法三：CSS3多列布局模块）

您可能会阅读有关CSS3 way of doing it 的信息，但它对于生产网站来说并不实用。至少现在还没有。

【讨论】：

这些列实际上是有序的，不幸的是，我不能指望它们不会破坏 contentColumn 容器（实际上我希望它们会被破坏）。由于显而易见的原因，CSS3 不是一个选项，所以仍然卡住了。
也许您应该考虑删除整个列概念？会让你自己和你的客户的事情变得更容易;-)
为什么在 2010 年“还不能用于生产网站”？很实用now, in 2019，不是吗？
我猜是的。那时还没有那么多，因为它在过去的那些老式浏览器中没有得到广泛支持。

【解决方案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>

【讨论】：

你忘了 IE10+ :-o

【解决方案5】：

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

<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的高度，其他文字就会流到容器的右边。

【讨论】：

【解决方案6】：

在下面，我创建了一种静态和动态方法来对段落进行分栏。代码几乎是自记录的。

前进

下面，您将找到以下创建列的方法：

静态（2 列）
动态 w/ JavaScript + CSS（n 列）
动态 w/ JavaScript + CSS3（n 列）

静态（2 列）

这是一个简单的 2 列布局。基于Glennular的1st answer。

$(document).ready(function () {
    var columns = 2;
    var size = $("#data > p").size();
    var half = size / columns;
    $(".col50 > p").each(function (index) {
        if (index >= half) {
            $(this).appendTo(".col50:eq(1)");
        }
    });
});

.col50 {
    display: inline-block;
    vertical-align: top;
    width: 48.2%;
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col50">
    <!-- 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>
    <p>This is paragraph 7. Lorem ipsum ...</p>
    <p>This is paragraph 8. Lorem ipsum ...</p>
    <p>This is paragraph 9. Lorem ipsum ...</p>
    <p>This is paragraph 10. Lorem ipsum ...</p>
    <p>This is paragraph 11. Lorem ipsum ...</p>
    <!-- data End-->
</div>
<div class="col50"></div>

动态 w/ JavaScript + CSS（n 列）

通过这种方法，我基本上可以检测块是否需要转换为列。格式为col-{n}。 n 是您要创建的列数。

$(document).ready(function () {
    splitByColumns('col-', 4);
});

function splitByColumns(prefix, gap) {
    $('[class^="' + prefix + '"]').each(function(index, el) {
        var me = $(this);
        var count = me.attr("class").split(' ').filter(function(className) {
            return className.indexOf(prefix) === 0;
        }).reduce(function(result, value) {
            return Math.max(parseInt(value.replace(prefix, '')), result);
        }, 0);
        var paragraphs = me.find('p').get();
        me.empty(); // We now have a copy of the children, we can clear the element.
        var size = paragraphs.length;
        var percent = 1 / count;
        var width = (percent * 100 - (gap / count || percent)).toFixed(2) + '%';
        var limit = Math.round(size / count);
        var incr = 0;
        var gutter = gap / 2 + 'px';
        for (var col = 0; col < count; col++) {
            var colDiv = $('<div>').addClass('col').css({ width: width });
            var css = {};
            if (col > -1 && col < count -1) css['margin-right'] = gutter;
            if (col > 0 && col < count)     css['margin-left'] = gutter;
            colDiv.css(css);
            for (var line = 0; line < limit && incr < size; line++) {
                colDiv.append(paragraphs[incr++]);
            }
            me.append(colDiv);
        }
    });
}

.col {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-6">
    <!-- 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>
    <p>This is paragraph 7. Lorem ipsum ...</p>
    <p>This is paragraph 8. Lorem ipsum ...</p>
    <p>This is paragraph 9. Lorem ipsum ...</p>
    <p>This is paragraph 10. Lorem ipsum ...</p>
    <p>This is paragraph 11. Lorem ipsum ...</p>
    <!-- data End-->
</div>

动态 w/ JavaScript + CSS3（n 列）

这源自Glennular 的2nd answer。它使用column-count 和column-gap CSS3 规则。

$(document).ready(function () {
    splitByColumns('col-', '4px');
});

function splitByColumns(prefix, gap) {
    var vendors = [ '', '-moz', '-webkit-' ];
    var getColumnCount = function(el) {
        return el.attr("class").split(' ').filter(function(className) {
            return className.indexOf(prefix) === 0;
        }).reduce(function(result, value) {
            return Math.max(parseInt(value.replace(prefix, '')), result);
        }, 0);
    }
    $('[class^="' + prefix + '"]').each(function(index, el) {
        var me = $(this);
        var count = getColumnCount(me);
        var css = {};
        $.each(vendors, function(idx, vendor) {
            css[vendor + 'column-count'] = count;
            css[vendor + 'column-gap'] = gap;
        });
        me.css(css);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-3">
    <!-- 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>
    <p>This is paragraph 7. Lorem ipsum ...</p>
    <p>This is paragraph 8. Lorem ipsum ...</p>
    <p>This is paragraph 9. Lorem ipsum ...</p>
    <p>This is paragraph 10. Lorem ipsum ...</p>
    <p>This is paragraph 11. Lorem ipsum ...</p>
    <!-- data End-->
</div>

【讨论】：

【解决方案7】：

此解决方案将拆分为两列，并将内容一半在一行中，另一半在另一行中。 如果您正在处理加载到第一列的数据，并且希望它每次都均匀流动，这会派上用场。 :)。您可以使用放入第一列的数量。这也适用于列表。

享受吧。

<html>
<head>
<title>great script for dividing things into cols</title>



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script>
$(document).ready(function(){

var count=$('.firstcol span').length;
var selectedIndex =$('.firstcol span').eq(count/2-1);
var selectIndexafter=selectedIndex.nextAll();


if (count>1)
{
selectIndexafter.appendTo('.secondcol');
}

 });

</script>
<style>
body{font-family:arial;}
.firstcol{float:left;padding-left:100px;}
.secondcol{float:left;color:blue;position:relative;top:-20;px;padding-left:100px;}
.secondcol h3 {font-size:18px;font-weight:normal;color:grey}
span{}
</style>

</head>
<body>

<div class="firstcol">

<span>1</span><br />
<span>2</span><br />
<span>3</span><br />
<span>4</span><br />
<span>5</span><br />
<span>6</span><br />
<span>7</span><br />
<span>8</span><br />
<span>9</span><br />
<span>10</span><br />
<!--<span>11</span><br />
<span>12</span><br />
<span>13</span><br />
<span>14</span><br />
<span>15</span><br />
<span>16</span><br />
<span>17</span><br />
<span>18</span><br />
<span>19</span><br />
<span>20</span><br />
<span>21</span><br />
<span>22</span><br />
<span>23</span><br />
<span>24</span><br />
<span>25</span><br />-->
</div>


<div class="secondcol">


</div>


</body>

</html>

【讨论】：

附带说明，您甚至不需要条件，我只是添加了它，以防您只希望它在某个数字之后“溢出”，就像在溢出之前将其设置为 4。跨度>

【解决方案8】：

也许是一个稍微紧凑的版本？我的用例是在给定一个 json 专业（数据）数组的情况下输出大学专业。

var count_data      = data.length;

$.each( data, function( index ){
    var column = ( index < count_data/2 ) ? 1 : 2;
    $("#column"+column).append(this.name+'<br/>');
});

<div id="majors_view" class="span12 pull-left">

  <div class="row-fluid">
    <div class="span5" id="column1"> </div>
    <div class="span5 offset1" id="column2"> </div>
  </div>

</div>

【讨论】：