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


相关推荐
小二·2 分钟前
Prompt Engineering 高级技巧:CoT/ToT/ReAct 等进阶方法论实战
前端·react.js·prompt
chancygcx_3 分钟前
前端框架React day1--React入门
前端·react.js·前端框架
quan_泉18 分钟前
DIDCTF 取证初学者
java·服务器·前端
无风听海29 分钟前
Promise 与 Async Await 深度解析
前端·javascript
牛奶32 分钟前
AI 永远说好,于是我们只会说 yes
前端·aigc·ai编程
浩风祭月32 分钟前
把前端项目的 CI 构建时间从 15 分钟压到了 2 分钟
前端·ai编程
牛奶36 分钟前
黑客是怎么看到你数据的?
前端·安全·黑客
ihuyigui38 分钟前
国际企业办公短信接口
前端·后端·架构
lpd_lt1 小时前
服务端类vue等页面AI测试方向
前端·vue.js·人工智能
AugustRed1 小时前
A2UI 完整学习指南(含 Java 后端 + 前端实战示例)
java·开发语言·前端