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


相关推荐
计算机魔术师7 分钟前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端
计算机魔术师22 分钟前
OpenAI的AI代理偷偷给RubyGems下毒,我们却毫无察觉
前端
甲维斯31 分钟前
0代码,0建模,3句话开发一个3D游戏!
前端·游戏·游戏开发
IT_陈寒43 分钟前
Vue的响应式更新把我坑惨了,原来问题出在这
前端·人工智能·后端
tingke1 小时前
别再堆 AGENTS.md 了:前端团队的 Agent 上下文分层落地指南
前端
李明卫杭州1 小时前
React 复合事件系统对比解析
前端·javascript·react.js
葡萄城技术团队2 小时前
SpreadJS V19.2 新特性揭秘:FILTERXML 函数
前端
袋鼠云数栈UED团队2 小时前
AI Coding 方法论分析:同一个需求 SpecKit 、 Superpowers、 MattpocockSkills 不同设计
前端·aigc·ai编程
掰头战士2 小时前
Prompt Cache,如果agent全靠LLM方做隐式缓存实在不够用。
前端·llm·agent
LEE3 小时前
前端转型全栈 01:数据建模,前端最大的盲区
前端·javascript·后端