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

列数: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相反) |


相关推荐
梦de天空一米16882 小时前
【一个重复id让游戏卡在62%,聊聊配置表检查】
前端
用户3434612783202 小时前
用户认证系统在高并发下的幂等性与限流策略踩坑实录
css
ryn483982 小时前
01 一个功能模块,怎么分层才不乱
前端·ai编程·claude
Amos_Web2 小时前
通过 Rspack 源码学 Rust(五):读懂 Result 与问号运算符的错误返回
前端
杨航 AI2 小时前
JEV的用法
java·前端·数据库
Amos_Web2 小时前
Rspack 源码解析(三十五):rspack_error 如何用 miette 渲染带源码定位的错误链
前端
去伪存真2 小时前
高敏资产场景下的大模型协同设计架构
前端·agent
修炼的dance2 小时前
OCR预处理测了108组,纠斜去噪有用,坑在顺序和力度
前端
疯华整猫2 小时前
Android 16 后台常驻适配:用 Trae 搭一套“前台服务 + 加急 Job”的可存活架构
前端
不可能片场2 小时前
AI视频成片 帧间差分把拼接缝照出来
前端·electron