代码之家 › 专栏 › 技术社区 › Joe Mastey

使用CSS自动处理2列文本

two-columns css3 css html javascript

Joe Mastey · 技术社区 · 15 年前

我的代码类似于:

<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> 这个文本是由客户端通过Wysiwyg编辑器输入的,因此我注入的任何元素都可能在稍后或莫名其妙地被杀死。

8 回复 | 直到 10 年前

Anri dprahut 12 年前

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

106

tomekwi 10 年前

使用 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+ -webkit- )
IE 10 +
火狐2 + -moz- )
Safari 3.1 + - WebKIT )
歌剧15 + - WebKIT )

Arve Systad 15 年前

当前,只有使用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; */ }

您还可以在段落之间插入更清晰的分隔符,以避免使用固定高度。如果你想要二列,在两段和两段之间添加更清晰的分隔符。这将使下两个段落的顶部对齐,使其看起来更整洁。例子:

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

(方法3:CSS3多列布局模块)

你可能会读到 CSS3 way of doing it 但对于一个制作网站来说,这并不实际。至少现在还没有。

Brad Larson 12 年前

下面是一个简单的两列类示例:

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

其中您将应用于这样的文本块:

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

Musa 13 年前

不是这里的专家,但这是我做的,而且很管用。

<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的高度,其他文本将流向容器的右侧。

Community Mohan Dere 8 年前

下面我创建了一个静态和动态的方法来对段落进行分列。代码基本上是自我记录的。

前部

下面是创建列的以下方法:

静态(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列)

这是从上派生的晶质的的 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>

namretiolnave 13 年前

此解决方案将分为两列,并将内容分成两行,一行一列。 如果您正在处理加载到第一列中的数据,并且希望它每次都均匀地流动,那么这就非常有用。:)您可以使用放入第一列的数量。这也适用于列表。

享受。

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

sjskier 11 年前

也许是稍微紧一点的版本?我的用例是在给定专业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>