html布局-多列布局

html多列布局

尽管当前计算机屏幕已经变得更宽，但研究表明，人们在阅读长文本行的时候仍然会感到困难（通常认为每行大概65到75个字符是最适合阅读的长度）。文本行长度的习惯导致了我们设计布局时存在一些限制，也导致网站无法充分利用宽屏所赋予的机会。多年来，杂志和报纸已经在使用多列布局让内容流动起来，这种布局解决了长文本行的处理以及如何把许多材料放入到有限空间的问题

现在，随着CSS3中多列布局模块的出现，网站也可以利用多列布局了。通过 CSS3 多列布局，能够创建多个列来对文本进行布局

css3多列属性

column-count

定义：column-count 属性规定元素应该被划分的列数

语法：column-count: number|auto;

实例:(演示地址)

    
    .div{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    }

column-gap

定义：column-gap 属性规定列之间的间隔

语法: column-gap: length|normal;

属性值：

length：把列间的间隔设置为指定的长度

normal：规定列间间隔为一个常规的间隔

实例：(演示地址)

    
    .div{
    -moz-column-gap:50px; /* Firefox */
    -webkit-column-gap:50px; /* Safari and Chrome */
    column-gap:50px;
    }

column-rule-style

定义：column-rule-style属性指定列之间的样式规则

语法：column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

实例 (演示地址)

    
    .div{
        column-count:3;
        column-rule-style:dotted;
    }

column-rule-width

定义：column-rule-width属性指定列之间的宽度规则

语法: column-rule-width: thin|medium|thick|length;

属性值：

thin：指定一个细边框的规则

medium：定义一个中等边框规

hick：指定一个粗边框的规则

ength：指定宽度的规则

实例 (演示地址)

    
    .div{
        column-count: 3;
        column-rule-style: outset;
        column-rule-width: 10px;
    }

column-rule-color

定义：column-rule-color属性指定列之间的颜色规则

语法：column-rule-color: color;

实例：(演示地址)

    
    .div{
        column-count: 3;
        column-rule-style: outset;
        column-rule-color:#ff0000;
    }

column-rule

定义：column-rule 属性设置列之间的宽度、样式和颜色规则

column-rule 属性是一个简写属性，用于设置所有 column-rule-* 属性：column-rule-width;column-rule-style;column-rule-color

语法： column-rule: column-rule-width column-rule-style column-rule-color;

实例 (演示地址)

    
    .div{
        -moz-column-rule:4px outset #ff00ff; /* Firefox */
        -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
        column-rule:4px outset #ff00ff;
    }

column-width

定义：column-width属性指定列的宽度

语法：column-width: auto|length;

属性值：

auto：浏览器将决定列的宽度；

length：指定列宽的长度

实例 (演示地址)

    
    .div{
        column-width:100px;
        -moz-column-width:100px; /* Firefox */
        -webkit-column-width:100px; /* Safari and Chrome */
    }

columns

定义：columns属性指定列的宽度和数量

语法 columns: column-width column-count;

属性值：

column-width：列的宽度；

column-count：列数

实例 (演示地址)

    
    .div{
        columns:100px 3;
        -webkit-columns:100px 3; /* Safari and Chrome */
        -moz-columns:100px 3; /* Firefox */
    }