CSS3-多列布局

CSS3使用columns属性定义多列布局，属性初始值根据元素个别属性而定，适用于不可替换的块元素、行内块元素、单元格，表格除外。

1设置列宽（column-width）

column-width定义单列显示的宽度

column-width：length|auto;

取值说明：
length：长度值，不可为负值。
auto：根据浏览器自动计算设置。

column-width可以与其他多列布局属性配合使用，设计指定固定列数、列宽的布局效果；

单独使用，限制单列宽度，当超出宽度时，则会自动多列显示。

示例：

<STYLE type="text/css" media="all">
/*定义网页列宽为300像素，则网页中每个栏目的最大宽度为300像素*/
body {
    -webkit-column-width:300px;
    -moz-column-width:300px;
    column-width:300px;
}
</STYLE>

2设置列数（column-count）

column-count定义列数

column-count：integer|auto;

取值说明：
interger：定义栏目的列数，取值为大于零的整数。
auto：根据浏览器计算值自动设置

示例：

<style type="text/css" media="all">

/*定义网页列数为3，这样整个页面总是显示为3列*/
body {
    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;
}

</style>

3设置列间距（column-gap）

column-gap定义两栏之间的间距

column-gap：normal|length;

取值说明：
normal：根据浏览器默认设置进行解析，一般为1em
length：长度值，不可为负值。

示例：

<style type="text/css" media="all">

body {
    /*定义页面内容显示为三列*/
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    /*定义列间距为3em，默认为1em*/
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
    line-height: 1.8em; /* 定义页面文本行高 */
}


</style>

4设置列边框样式（column-rule）

column-rule定义每列之间边框的宽度、样式和颜色

column-rule：length|style|color|transparent;

示例：

<style type="text/css" media="all">

body {
    /*定义页面内容显示为三列*/
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    /*定义列间距为3em，默认为1em*/
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
    line-height: 2.5em;
    /*定义列边框为2像素宽的灰色虚线*/
    -webkit-column-rule: dashed 2px gray;
    -moz-column-rule: dashed 2px gray;
    column-rule: dashed 2px gray;
}



</style>

5设置跨列显示（column-span）

column-span定义跨列显示

column-span:none|all;

取值说明：
none:只在本栏中显示
all：将横跨所有列

示例：

<style type="text/css" media="all">

body {
    /*定义页面内容显示为三列*/
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    /*定义列间距为3em，默认为1em*/
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
    line-height: 2.5em;
    /*定义列边框为2像素宽的灰色虚线*/
    -webkit-column-rule: dashed 2px gray;
    -moz-column-rule: dashed 2px gray;
    column-rule: dashed 2px gray;}
/*设置一级标题跨越所有列显示*/
h1 {
    color: #333333;
    font-size: 20px;
    text-align: center;
    padding: 12px;
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;}
/*设置二级标题跨越所有列显示*/
h2 {
    font-size: 16px;
    text-align: center;
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;}
p {color: #333333; font-size: 14px; line-height: 180%; text-indent: 2em;}




</style>

6设置列高度（column-fill）

column-fill定义栏目高度是否统一

column-fill:auto|balance;

取值说明：
auto：各列的高度随其内容的变化而自动变化
balance：各列的高度将会根据内容最多的哪一列的高度进行统一

示例：

<style type="text/css" media="all">

body {
    /*定义页面内容显示为三列*/
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    /*定义列间距为3em，默认为1em*/
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
    line-height: 2.5em;
    /*定义列边框为2像素宽的灰色虚线*/
    -webkit-column-rule: dashed 2px gray;
    -moz-column-rule: dashed 2px gray;
    column-rule: dashed 2px gray;
    /*设置各列高度自动调整*/
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;}
/*设置一级标题跨越所有列显示*/
h1 {
    color: #333333;
    font-size: 20px;
    text-align: center;
    padding: 12px;
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;}
/*设置二级标题跨越所有列显示*/
h2 {
    font-size: 16px;
    text-align: center;
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;}
p {color: #333333; font-size: 14px; line-height: 180%; text-indent: 2em;}




</style>