小开

目前，仅使用 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 解决方案，计算段落的总数，将它们分成两部分并创建列。对于那些禁用了 JavaScript 的用户来说，这也将优雅地降级。第三种选择是，如果可以的话，让所有这些分列操作在服务器端发生。

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

你可能读过关于 CSS3的做法的文章，但是它对于一个制作网站来说并不实用，至少现在还不实用。

小开

最佳答案

使用 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的多栏布局:

.container {
column-count: 2;
column-gap: 20px;
}

浏览器支持(无前缀) :

铬50
火狐52
Safari 9
边缘12
歌剧11.5
IE10

小开

这个解决方案将拆分为两列，并将内容一半分为一行，一半分为另一行。 如果您正在处理加载到第一列的数据，并且希望每次都能均匀地流动，那么这将非常方便。:).你可以使用放入第一个目录的数量，这也可以用于列表。

好好享受吧。

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

小开

我不是这方面的专家，但我就是这么做的，而且奏效了

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

小开

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

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

其中的一部分应用于如下文本块:

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

小开

也许是一个稍微紧凑一点的版本? 我的用例是输出给出了一个 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>

小开

下面我创建了一个静态和动态的段落分栏方法。

前进

下面是创建列的方法:

静态(2列)
动态 w/JavaScript + CSS (n 列)
动态 w/JavaScript + CSS3(n 列)

静态(2列)

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

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

这是从谷状的第二个答案上派生出来的，它使用 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>

使用 CSS 自动显示2列文本