column-count属性主要用来给元素指定想要的列数和允许的最大列数。
语法规则：
column-count：auto | <integer>
取值说明：
| 属性值 | 属性值说明 |
| auto | 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 |
| <integer> | 此值为正整数值，主要用来定义元素的列数，取值为大于 0 的整数，负值无效。 |
例如：将列分成四列显示，代码如下：
column-count:4;
实例演示：
让内容分成 2 列显示，注意浏览器的兼容性！
HTML 代码：
<div > <h2>我要分列显示</h2> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局，W3C 特意给 CSS3 增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在 Web 页面上实现文本的多列布局，正如下图所示。</p> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局，W3C 特意给 CSS3 增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在 Web 页面上实现文本的多列布局，正如下图所示。</p> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局，W3C 特意给 CSS3 增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在 Web 页面上实现文本的多列布局，正如下图所示。</p> </div>
CSS 代码：
.columns {
padding: 5px;
border: 1px solid green;
width: 600px;
margin: 20px auto;
-webkit-column-count:2;
-moz-column-count:2;
-o-column-count:2;
-ms-column-count:2;
column-count:2;
}
效果如下：
