CSS3 (columns)

发布时间：2019-08-25 09:37:59编辑：auto阅读（1674）

    CSS3 多列布局 columns

    a.column-width 每列的宽度

    实例代码：

    说明：

    1.如果内容的宽度小于所设置内容的宽度，则只出现一列，并且不会影响元素本身的display属性。如果内容的宽度大于所设置的值，则会用内容的宽度除以所设置的值形成多列现象。

    2.多列布局只能用于块元素上。(比如在span上这个属性将不会起作用)

    b.column-count 列数


    实例代码：

    说明：

    1.设置的值如果小于或者等于1都将显示一列就相当于没有设置。

    2.如果大于1元素里面的内容会平均分成几列显示。

    3.同样这个属性也只能作用在块元素上。

    多列布局主要靠这两个属性进行布局。

    c.column-gap 列之间的间隔

    用于设置列于列之间的间隔，不能为负值。

    d.column-rule: 列间隔边框的样式

    -moz-column-rule-width: 10px;间隔边框的厚度

    -moz-column-rule-style: solid;间隔边框类型

    -moz-column-rule-color: red;间隔边框的颜色

    e.column-span: 横跨通栏

    说明：

    1.p里面的内容将横跨这几个列，形成独立的一整行。

    2.这个属性ff暂时不支持。

    3.值为 all || none

    其它属性浏览器暂时支持不是很好，先不研究，呵呵。

关键字：

上一篇： money3

下一篇： 算法题3