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

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

          火狐不支持该属性。

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓