用CSS自动stream动2列文字

我有类似于以下代码：

<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编辑器input了这个文本，所以我注入的任何元素都有可能在之后或者莫名其妙地被杀死。

使用jQuery

创build第二列，并将需要的元素移到其中。

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

更新：

或者因为现在的要求是让他们同样大小。我会build议使用预编译的jQuery插件： Columnizer jQuery Plugin

http://jsfiddle.net/dPUmZ/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-）

在eachother旁边自动浮动两列目前只能用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; }

方法2：文本连续时

更先进，但可以做到。

 <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的解决scheme，计算段落的总数，将它们分成两部分，并创build列。对于禁用了JavaScript的用户，这也会降级。第三个选项是，如果这是一个选项，所有这些拆分成列动作都会发生在服务器端。

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

你可能会读到关于CSS3的方法，但是对于一个制作网站来说并不实际。还没有，至less。

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

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

其中你会应用到一个像这样的文本块：

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

不是这里的专家，但这是我做的，它的工作

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

下面我已经创build了一个静态和dynamic的方法来分段化段落。代码非常自我logging。

Foreward

下面，您将find以下创build列的方法：

静态（2列）
dynamicw / JavaScript + CSS（n-columns）
dynamicw / JavaScript + CSS3（n-columns）

静态（2列）

这是一个简单的2列布局。基于Glennular的第一个答案。

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

该解决scheme将分成两列，将内容一半分为一半。 如果您正在处理加载到第一列中的数据，并且希望每次均匀地stream动数据，那么这很方便。 :)。您可以使用放入第一列的金额。这也将与列表一起工作。

请享用。

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

也许是稍微紧一点的版本？我的用例是输出大学专业给予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>