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


相关推荐
环信4 分钟前
即时通讯服务的数据安全与合规实践
前端
轻闲一号机27 分钟前
【语音】笔记
前端·笔记·算法
初心丨哈士奇27 分钟前
一行 # 的差别:彻底搞懂前端路由的 hash 和 history 模式
前端·浏览器
羊羊小栈31 分钟前
非物质文化宣传系统(基于前后端Web开发)
前端·人工智能·毕业设计·大作业
环信32 分钟前
从SLA到弱网对抗-环信即时通讯云的可靠性工程
前端
半个落月1 小时前
前端工程化第一步:BEM 国际命名规范与 CSS Reset 实战
前端·css
kyriewen1 小时前
开源|Image Harvest v1.0.5:AI 智能标签 + Eagle 导出,设计师和开发者的图片工作流神器
前端·javascript·ai编程
wuhen_n1 小时前
LangChain Memory 详解:实现 AI 连续对话不丢失上下文
前端·langchain·ai编程
wuhen_n1 小时前
LangChain Function Call 实战:让 AI 调用自定义工具
前端·langchain·ai编程
DyLatte1 小时前
很多人把坚持,误以为成长
前端·后端·程序员