CSS新手入门笔记整理：CSS多列布局

2023-12-14 11:06:45

列数：column-count

语法

column-count: 取值;

属性值

说明

auto

列数由column-width属性决定（默认值）

n（正整数）

自动划分为n列

列宽：column-width

语法

column-width: 取值;

属性值

说明

auto

列数由column-count属性决定（默认值）

长度值

单位可以为px、em和百分比等

body会自动根据容器宽度、每列宽度、内容多少这三者来计算列数。

列间距：column-gap

语法

column-gap: 取值;

属性值

说明

normal

浏览器默认长度值

长度值

单位可以为px、em和百分比等

分隔线：column-rule

语法

column-rule: width style color;
  • column-rule-width：定义分隔线的宽度。
  • column-rule-style：定义分隔线的样式。
  • column-rule-color：定义分隔线的颜色。

跨列：column-span

语法

column-span: 取值;

属性值

说明

none

不跨列

all

跨所有列（跟none相反）

文章来源:https://blog.csdn.net/weixin_55576134/article/details/134987224
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。