CSS——多列

  • 2019 年 11 月 26 日
  • 笔记

定义

多列(Multi Columns)属性是一些与文本的多列排版相关的CSS属性。

概述

多列属性可以将文本设计成像报纸杂志那种多列排版的布局,类似于Microsoft Word中的段落分栏功能。

多列属性主要应用于文本的容器元素上,包括列数(column-count属性)、统一的列宽(column-with属性)和统一的列间距(cloumn-gap属性)等。

并不能分别指定各列的宽度,因此结果是内容能且只能均匀分散到多列。

列表

元素

描述

column-count

column-count 属性用来描述元素应该被划分的列数。

column-fill

column-fill 属性用来规定如何填充列(是否进行填充)。

column-gap

column-gap 属性用来规定元素列间距的大小。

column-rule

column-rule 属性用来规定列间分隔线的宽度,样式及颜色。

column-rule-color

column-rule-color 属性用来规定列间分隔线的颜色规则。

column-rule-style

column-rule-style 属性用来规定列间分隔线的样式规则。

column-rule-width

column-rule-width 属性用来规定列间分隔线的宽度。

column-span

column-span 属性用来规定元素应当横跨多少列。

column-width

column-width 属性用来规定列的宽度。

columns

columns 属性是一个简写的属性,允许同时规定 column-width 和 column-count 属性。

变更点

多列属性全部是CSS3新增加的。