column-width的使用和 CSS 中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。
基本语法：
column-width: auto | <length>
取值说明：
| 属性值 | 说明 |
| auto | 如果column-width设置值为 auto 或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 |
| <length> | 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。 |
实例演示：
要求内容分为 3 栏，每栏的内容宽度设置为 200px;（注：一定要考虑到浏览器的兼容性）
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: 900px;
margin: 20px auto;
column-width:200px;
column-width:200px;
column-width:200px;
column-width:200px;
column-width:200px;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
-ms-column-count:3;
column-count:3;
}
效果如下：
