前面介绍过通过float属性或通过display:inline-box来实现多栏布局，但通过这两种方式实现的多栏布局底部无法对齐，而且通过传统方式来实现多栏布局比较烦琐。为了解决这个问题，CSS 3专门提供了多栏布局的功能。

CSS 3新增的分栏功能

　　通过CSS 3实现分栏非常简单，只要简单地增加column-count属性即可。

注意

　　目前各主流浏览器都暂未支持使用标准的column-count属性，因此在各浏览器中需增加特定的浏览器前缀，如下面页面代码所示。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 分栏布局 </title>
    <style type="text/css">
        div#content {
            column-count: 2;
            -moz-column-count: 2;
            -o-column-count: 2;
            -webkit-column-count: 2;
        }
    </style>
</head>  
<body>  
<div id="content">  
<h2>疯狂软件介绍</h2>  
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
</div>  
</body>  
</html>

设置分栏样式

　　为了实现分栏效果，CSS 3增加了大量属性，如下所示。
　　➢　columns：这是一个复合属性，通过该属性可同时指定栏目宽度、栏目数两个属性值。该属性相当于同时指定column-width、column-count属性。
　　➢　column-width：该属性指定一个长度值，用于指定每个栏目的宽度。
　　➢　column-count：该属性指定一个整数值，用于指定栏目数。
　　➢　column-rule：这是一个复合属性，用于指定各栏目之间的分隔条。该属性可同时指定分隔条的宽度、样式、颜色。该属性相当于同时指定column-rule-width、column-rule-style、column-rule-color属性。
　　➢　column-rule-width：该属性指定一个长度值，用于指定栏目之间分隔条的宽度。
　　➢　column-rule-style：该属性用于设置分隔条的线型。该属性支持的属性值有none、dotted、dashed、solid、double、groove、ridge、inset、outset，这些属性值与前面介绍边框线型时各属性值的意义完全相同。
　　➢　column-rule-color：该属性用于设置分隔条的颜色。
　　➢　column-gap：该属性指定一个长度值，用于指定各栏目之间的间距。
　　➢　column-fill：该属性用于控制栏目的高度。该属性支持如下两个属性值。
　　□　auto：各栏目的高度随着其内容的多少自动变化。
　　□　balance：各栏目的高度将会统一成内容最多的那一栏的高度。

注意：

　　column-width、column-count这两个属性可以相互影响，它们指定的栏目宽度、栏目数并不是绝对的。当分栏内容所在容器的宽度大于column-width×column-count＋间距时，有的浏览器会增加栏目数，有的浏览器会增加栏目宽度。为了避免不同浏览器出现这种差异，一般建议让容器的宽度与column-width×column-count+间距大致相等。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 分栏布局 </title>
    <style type="text/css">
        div#container{
            width: 1100px;
            border: 1px solid black;
        }
        div#content {
            /* 设置栏目数， 以及各栏目的宽度*/
            columns: 240px 3;
            -moz-columns: 240px 3;
            -o-columns: 240px 3;
            -webkit-columns: 240px 3;
        }
    </style>
</head>  
<body>  
<div id="container">  
<div id="content">  
<h2>疯狂软件介绍</h2>  
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
</div>  
</div>  
</body>  
</html>
例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 分栏布局 </title>
    <style type="text/css">
        div#container{
            margin:auto;
            width: 840px;
            border: 1px solid black;
        }
        div#content {
            /* 设置栏目数， 以及各栏目的宽度*/
            columns: 240px 3;
            -moz-columns: 240px 3;
            -o-columns: 240px 3;
            -webkit-columns: 240px 3;
            /* 设置栏目之间的间距*/
            column-gap: 50px;
            -moz-column-gap: 50px;
            -o-column-gap: 50px;
            -webkit-column-gap: 50px;
            /* 设置栏目之间的分隔条*/
            column-rule: 10px inset #aaa;
            -moz-column-rule: 10px inset #aaa;
            -o-column-rule: 10px inset #aaa;
            -webkit-column-rule: 10px inset #aaa;
        }
    </style>
</head>  
<body>  
<div id="container">  
<div id="content">  
<h2>疯狂软件介绍</h2>  
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
</div>  
</div>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。