百变鹏仔-专注前端行业精选

css布局分栏布局介绍

作者：鹏仔先生日期：2020-06-02 16:16:56浏览：1880分类：CSS

1. 设置栏数

语法:

column-count: 数值;

2. 设置每栏的宽度

语法:

column-width: 数值+单位;

注: column-count 和 column-width 设置其中一个即可

3. 设置栏间距

语法:

column-gap: 数值+单位;

4. 设置栏间隔线

语法:

column-rule: 宽度  线型(solid/dashed/dotted)  颜色;

eg:

column-rule: 2px solid red;

5. 设置元素是否跨栏显示

语法:

column-span: all(跨栏显示)  |  none(不跨栏显示);

注: 该属性给需要跨栏显示的元素添加;

火狐不支持该属性。

前端 css

手机扫码访问

猜你还喜欢