上一节:
下一节:

  CSS 多列

  • CSS多列

    CSS多列布局

  • CSS多列属性

    在本章中，您将了解以下多列属性：
    • column-count
    • column-gap
    • column-rule-style
    • column-rule-width
    • column-rule-color
    • column-rule
    • column-span
    • column-width

  • 多列浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。后跟-webkit-或-moz-的数字指定使用前缀的第一个版本。
    属性 Internet Explorer Chrome FireFox Safari Opera
    属性名
    column-count 10.0 50.0 4.0-webkit- 52.0 2.0-moz- 9.0 3.1-webkit- 37.0 15.0-webkit-11.1
    column-gap 10.0 50.0 4.0-webkit- 52.0 2.0-moz- 9.0 3.1-webkit- 37.0 15.0-webkit-11.1
    column-rule 10.0 50.0 4.0-webkit- 52.0 2.0-moz- 9.0 3.1-webkit- 37.0 15.0-webkit-11.1
    column-rule-color 10.0 50.0 4.0-webkit- 52.0 2.0-moz- 9.0 3.1-webkit- 37.0 15.0-webkit-11.1
    column-rule-style 10.0 50.0 4.0-webkit- 52.0 2.0-moz- 9.0 3.1-webkit- 37.0 15.0-webkit-11.1
    column-rule-width 10.0 50.0 4.0-webkit- 52.0 2.0-moz- 9.0 3.1-webkit- 37.0 15.0-webkit-11.1
    column-span 10.0 50.0 4.0-webkit- 不支持 9.0 3.1-webkit- 37.0 15.0-webkit-11.1
    column-width 10.0 50.0 4.0-webkit- 52.0 2.0-moz- 9.0 3.1-webkit- 37.0 15.0-webkit-11.1

  • CSS创建多个列

    column-count属性指定元素应分成的列数。以下示例将<div>元素中的文本分为3列： 
    div {
 column-count: 3;
}
    尝试一下

  • CSS指定列之间的间隙

    column-gap属性指定列之间的间隙。以下示例指定列之间的40像素间隔： 
    div {
 column-gap: 40px;
}
    尝试一下

  • CSS列规则

    column-rule-style属性指定列之间规则的样式： 
    div {
 column-rule-style: solid;
}
    尝试一下
    column-rule-width属性指定列之间规则的宽度： 
    div {
 column-rule-width: 1px;
}
    尝试一下
    column-rule-color属性指定列之间规则的颜色： 
    div {
 column-rule-color: lightblue;
}
    尝试一下
    column-rule属性是一个简写属性，用于设置上面的所有column-rule-*属性。以下示例在列之间设置规则的宽度，样式和颜色： 
    div {
 column-rule: 1px solid lightblue;
}
    尝试一下

  • 指定元素应跨越的列数

    column-span属性指定元素应跨越多少列。以下示例指定<h2>元素应跨越所有列： 
    h2 {
 column-span: all;
}
    尝试一下

  • 指定列宽

    column-width属性指定列的建议最佳宽度。以下示例指定列的建议最佳宽度应为100px： 
    div {
 column-width: 100px;
}
    尝试一下

  • CSS多列属性

    下表列出了所有多列属性：
    属性 描述
    column-count 指定元素应划分的列数
    column-fill 指定如何填充列
    column-gap 指定列之间的间距
    column-rule 设置所有列规则-*属性的简写属性
    column-rule-color 指定列之间规则的颜色
    column-rule-style 指定列之间规则的样式
    column-rule-width 指定列之间规则的宽度
    column-span 指定元素应该跨越多少列
    column-width 指定列的建议最佳宽度
    columns 设置列宽和列计数的简写属性
上一节:
下一节: