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 r 0 Comments


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(不跨栏显示);

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

火狐不支持该属性。


本文链接：https://my.lmcjl.com/post/20960.html

展开阅读全文

相关文章

4 评论

留下您的评论.