前端必知必会-CSS多列布局

---

CSS 多列

CSS 多列布局 CSS 多列布局允许轻松定义多列文本 - 就像报纸一样：

CSS 多列属性

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

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-* 属性的简写属性
column-rule-color	指定列间规则的颜色
column-rule-style	指定列间规则的样式
column-rule-width	指定宽度列之间的规则
column-span	指定元素应跨越多少列
column-width	指定列的建议最佳宽度
columns	用于设置列宽和列数的简写属性

---

总结

本文介绍了CSS多列布局的使用，如有问题欢迎私信和评论