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


相关推荐
香草泡芙几秒前
解锁AI Agent潜能:基于Langchain组件库的落地指南(2)
前端·javascript·人工智能
wuhen_n几秒前
函数式组件 vs 有状态组件:何时使用更高效?
前端·javascript·vue.js
小码哥_常3 分钟前
Kotlin开发秘籍:解锁Android编程新姿势
前端
ETA87 分钟前
页面卡顿的元凶:可能是你没搞懂事件循环(面试可用)
前端·浏览器
毛骗导演8 分钟前
OpenClaw 技能系统源码解析:一个 Markdown 文件是怎么变成 AI 的能力的
前端·架构
kyriewen9 分钟前
当 JavaScript 试图做加法:一场混乱的“相亲”大会
前端·javascript·html
cxxcode10 分钟前
Node.js 进程间通信(IPC)方式总结
前端
Mintopia13 分钟前
Client Time 与 Server Time:分布式系统中的时间一致性与落地实践
前端·架构
ETA816 分钟前
浏览器渲染机制与优化实战
前端·浏览器