我的代码类似于以下内容：
<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编辑器输入了这个文本，因此我注入的任何元素都可能被后来或者莫名其妙地杀死。
答案 0 :(得分：109)
使用CSS3
.container {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
浏览器支持
-webkit- ）-moz- ）-webkit- ）-webkit- ）答案 1 :(得分：35)
使用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
答案 2 :(得分：22)
目前无法使用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，以避免使用固定高度。如果您想要两个列，请在两个和两个段落之间添加一个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; }
说到易用性：对于非技术客户来说，这些都不容易。你可能试图向他/她解释如何正确地做到这一点，并告诉他/她为什么。如果客户将来要通过WYSIWYG编辑器更新网页，那么学习非常基本的HTML也不是一个坏主意。
或者您可以尝试实现一些计算段落总数的Javascript解决方案，将它们分成两部分并创建列。对于已禁用JavaScript的用户，这也会优雅地降级。第三种选择是如果这是一个选项，那么所有这些拆分到列的操作都会发生在服务器端。
您可能会阅读CSS3 way of doing it，但这对于制作网站来说并不实用。至少还没有。
答案 3 :(得分：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>
答案 4 :(得分：3)
这里不是专家，但这就是我所做的并且有效
<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的高度，其他文本就会流到容器的右边。
答案 5 :(得分：1)
下面我在列化段落时创建了静态和动态方法。代码几乎是自我记录的。
下面，您将找到以下创建列的方法：
这是一个简单的2列布局。基于Glennular＆＃39; s 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>
使用这种方法，我基本上检测块是否需要转换为列。格式为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>
这是源于Glennular＆＃39; 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>
答案 6 :(得分：0)
此解决方案将拆分为两列，并将内容的一半划分为另一半。 如果您正在处理加载到第一列中的数据，并希望每次均匀流动，这会派上用场。 :)。您可以使用放入第一列的金额。这也适用于列表。
享受。
<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>
答案 7 :(得分：0)
可能是稍微紧张的版本？我的用例是在给出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>