为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上使用了几十年，但要在Web页面上实现这样的效果还是需要一些技巧的，庆幸的是，CSS3的时代来了~~~~多列布局可以轻松实现。我们来看一下具体的情况。
看看MDN的解释
喔吼吼~听到他怎么说是不是感觉大块人心呢~
要注意的一点是
上个代码先看看好了
大概就是这个样子的，注意一下，如果你的宽度设置的太过于宽然后你的文字达不到一定数量级的话，你设置的栏数也会完美的呈现出来喔~只不过高度不限死的话它就会从高度上面给你做手脚给你呈现四栏。但是！！！！
但是！！！！
但是1！！！
如果你文字十分稀少的话，你看看，它为了执行你的要求他也会强行四栏，我们可以看的出他的高度会让给最高的列，然后再根据要求来进行分栏，到最后字数不够还是会给你分出来不过是用空白来占位。
不知道当你看到这种布局的时候，有没有心头突然有种悸动的感觉。这种布局明明以前就要写一些其他的样式来实现啊。可是现在，就是现在，我们已经可以简简单单通过CSS3的这一个属性来实现了啊！
我们首先来看看下面这个属性表
| Properties属性 | CSS Version版本 | Inherit From Parent继承性 | Description简介 |
|---|---|---|---|
| columns | CSS3 | 无 | 设置或检索对象的列数和每列的宽度。复合属性 |
| column-width | CSS3 | 无 | 设置或检索对象每列的宽度 |
| column-count | CSS3 | 无 | 设置或检索对象的列数 |
| column-gap | CSS3 | 无 | 设置或检索对象的列与列之间的间隙 |
| column-rule | CSS3 | 无 | 设置或检索对象的列与列之间的边框。复合属性 |
| column-rule-width | CSS3 | 无 | 设置或检索对象的列与列之间的边框厚度。 |
| column-rule-style | CSS3 | 无 | 设置或检索对象的列与列之间的边框样式。 |
| column-rule-color | CSS3 | 无 | 设置或检索对象的列与列之间的边框颜色。 |
| column-span | CSS3 | 无 | 设置或检索对象元素是否横跨所有列。 |
| column-fill | CSS3 | 无 | 设置或检索对象所有列的高度是否统一。 |
| column-break-before | CSS3 | 无 | 设置或检索对象之前是否断行。 |
| column-break-after | CSS3 | 无 | 设置或检索对象之前是否断行。 |
| column-break-inside | CSS3 | 无 | 设置或检索对象内部是否断行。 |
这样 看可能会比较正式，我们换个法子来看看
- 列数和列宽：
columns、column-count、column-width - 列的间距和分列样式：
column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule - 跨越列：
column-span - 填充列：
column-fill - 分栏符：
column-break-before、column-break-after、column-break-inside
这样大家应该可以一目明了了吧~
按照步骤肯定要讲下语法
columns
[v_act]columns: <column-count> <column-width>[/v_act]这个是一个复合样式，包含了column-count和column-width。
column-count：有多少列
column-width：每一列有多宽
看看兼容性，虽然绿油油但是感觉还是不够啊。尚且需要加油的样子！！！
column-gap & column-rule
[v_act]column-gap: normal || length;[/v_act]
[v_act]column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;[/v_act]
这两个样式我想一起讲，因为是修饰类的。看个图就知道是什么了。
简直一目了然。通过这张图你是不是瞬间又清楚了这个属性的使用方法和效果呢？
其实呢，这里还有个小秘密不知道大家发现没有。就是~~~~~~看图~~~
看到了吗~rule-width增大不会霸占空间~
column-span
[v_act]column-span: none || all;[/v_act]
小舅子打灯笼---照旧、一图胜千言
这里给我的感觉有点像bootstrap的栅格化系统然后给了col-md-12的感觉，然后选择还只有占满和不占的选择，目前至少来说算是一个进步吧。
还有一些选项没有讲主要是感觉用处不大，待到感觉有奇特的地方的时候再做研究吧~
我的博客：http://zengjinchao.com/wordpress/