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


相关推荐
之歆20 分钟前
DAY04_HTML&CSS_从表单到样式的完整学习指南
css·html·产品运营
\xin1 小时前
pikachu自编exp,xss反射性get,post,存储型xss,dom,dom-x
前端·javascript·xss
是烟花哈6 小时前
【前端】React框架学习
前端·学习·react.js
qq4356947016 小时前
JavaWeb08
前端
2401_878454537 小时前
html和css的复习(1)
前端·css·html
@PHARAOH8 小时前
WHAT - git worktree 概念
前端·git
IT_陈寒8 小时前
我竟然被JavaScript的隐式类型转换坑了三天!
前端·人工智能·后端
我亚索贼六丶8 小时前
二十六. AI基础概念之如何更好的使用AI
前端
小码哥_常8 小时前
安卓启动页Logo适配秘籍:告别“奇形怪状”的展示
前端
我亚索贼六丶8 小时前
二十五.Electron 初体验与进阶
前端