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相反) |


相关推荐
牧艺29 分钟前
SPA 也能像原生 App:View Transitions API 从原理到可上线实战
前端·javascript·css
Dovis(誓平步青云)32 分钟前
现场问题先关闭还是先验收,建筑任务怎样处理依赖
前端·javascript·数据库·mysql·音视频
用户842981424181036 分钟前
压缩 ≠ 加密:前端代码保护的三层实践与踩坑记录
前端·javascript
前端一课1 小时前
别把人生过成一场等待退休的倒计时
前端
CENTER SAYS1 小时前
企业400电话办理全流程详解与材料准备(实操向)
前端·crm
:mnong1 小时前
Web 三维可视化技术对比:ParaView Web vs 本项目 wasm + Three.js
前端·webgl·opengl·opencl·科学可视化
Shirley~~1 小时前
three.js的调试面板工具
前端·3d
怕浪猫1 小时前
12个UI组件库,Star最低的下载最多
前端·javascript·面试
溪语流沙2 小时前
【Web全栈进阶】Vue3起步:组件、模板语法、响应式数据
前端·javascript·vue.js·css3
众链网络2 小时前
Agent 重试的工程解法:幂等、断点续跑与熔断怎么落地
java·前端·数据库·人工智能