1、多列布局——Columns
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，CSS3的多列布局可以轻松实现。
语法：
columns：<column-width> || <column-count>
多列布局columns属性参数主要就两个属性参数：列宽和列数。
参数：
<column-width>主要用来定义多列中每列的宽度
<column-count>主要用来定义多列中的列数
举例：要显示2栏显示，每栏宽度为200px，代码为：
columns: 200px 2;
到目前为止大部分主流浏览器都对其支持：
index.html代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>columns</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="columns">
<h2>我要分列显示</h2>
<p>
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout）。它住哟应用在文本的多列布局方面，对于文本的多列布局，我想大家并不陌生因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。
</p>
<p>
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout）。它住哟应用在文本的多列布局方面，对于文本的多列布局，我想大家并不陌生因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。
</p>
</div>
</body>
</html>
style.css代码：
.columns{
width:500px;
padding:5px;
border:1px solid red;
margin:20px auto;
-webkit-columns:150px 3;
-moz-columns:150px 3;
-o-columns:50px 3;
-ms-columns:150px 3;
columns:150px 3;
}
2、多列布局——column-width
column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。
基本语法如下所示：
column-width: auto | <length>
取值说明：
| 属性值 | 说明 |
| auto | 如果column-width设置为auto或者没有显示的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 |
| <length> | 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。 |
