
- CSS 教程
- CSS - 首页
- CSS - 路线图
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图片
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 块级边框
- CSS - 内联边框
- CSS - 外边距
- CSS - 列表
- CSS - 内边距
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS - 清除浮动
- CSS - 浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 排序
- CSS - 定位
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 聚焦
- CSS - 缩放
- CSS - 平移
- CSS - 高度
- CSS - 连字符字符
- CSS - 宽度
- CSS - 不透明度
- CSS - Z-Index
- CSS - 底部
- CSS - 导航栏
- CSS - 叠加层
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 计数器
- CSS - 剪切
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS - min-content
- CSS - 全部
- CSS - 内嵌
- CSS - 隔离
- CSS - 溢出滚动
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - 指针事件
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - 最大块级尺寸
- CSS - 最小块级尺寸
- CSS - 混合模式
- CSS - 最大内联尺寸
- CSS - 最小内联尺寸
- CSS - 偏移量
- CSS - 强调色
- CSS - 用户选择
- CSS 高级
- CSS - 网格
- CSS - 网格布局
- CSS - Flexbox
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文字特效
- CSS - 分页媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图片精灵
- CSS - !important
- CSS - 数据类型
- CSS3 教程
- CSS3 - 教程
- CSS - 圆角
- CSS - 边框图片
- CSS - 多重背景
- CSS - 颜色
- CSS - 渐变
- CSS - 盒阴影
- CSS - 盒装饰中断
- CSS - 光标颜色
- CSS - 文本阴影
- CSS - 文本
- CSS - 二维转换
- CSS - 三维转换
- CSS - 过渡
- CSS - 动画
- CSS - 多列
- CSS - 盒尺寸
- CSS - 工具提示
- CSS - 按钮
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 函数
- CSS - 数学函数
- CSS - 遮罩
- CSS - 形状
- CSS - 样式图片
- CSS - 特效性
- CSS - 自定义属性
- CSS 响应式
- CSS 响应式设计 - 简介
- CSS 响应式设计 - 视口
- CSS 响应式设计 - 网格视图
- CSS 响应式设计 - 媒体查询
- CSS 响应式设计 - 图片
- CSS 响应式设计 - 视频
- CSS 响应式设计 - 框架
- CSS 工具
- CSS - PX 到 EM 转换器
- CSS - 颜色选择器和动画
- CSS 资源
- CSS - 有用资源
- CSS - 讨论
CSS - columns 属性
CSS columns 属性是用于定义属性 column-width 和 column-count 值的简写属性,其中 column-width 设置每列的最小宽度,column-count 设置最大列数。
语法
columns: auto |column-width column-count| initial | inherit;
属性值
值 | 描述 |
---|---|
auto | 将 column-width 和 column-count 都设置为 auto。默认值。 |
column-width | 定义每列的最小宽度。 |
column-count | 定义最大列数。 |
initial | 将属性设置为其默认值。 |
inherit | 从父元素继承该属性。 |
CSS columns 属性示例
以下示例说明了使用不同值的 columns 属性。
使用 auto 值的 columns 属性
为了让浏览器根据内容和可用空间决定列宽,使其根据内容在可用空间中尽可能多地容纳列数,我们使用 auto 值。以下示例显示了这一点。
示例
<!DOCTYPE html> <html> <head> <style> .multicol-col-rule { columns: auto; } p{ background-color: lightgreen; } </style> </head> <body> <h2> CSS columns property </h2> <h4> columns: auto </h4> <div class="multicol-col-rule"> <p> TutorialsPoint is a comprehensive online learning platform offering tutorials, guides, and resources on a wide range of subjects, including programming, web development, data science, and more. It provides free and paid courses, covering basics to advanced topics, with interactive examples and practical exercises. The platform caters to learners of all levels, from beginners to professionals, helping them build skills through structured content and hands-on practice. TutorialsPoint also features coding playgrounds and forums for community support. </p> </div> </body> </html>
使用宽度和列数值的 columns 属性
要手动设置列宽和列数,我们可以在单个声明中在 columns 属性中指定 column-width 和 column-count。根据指定的宽度,列将适应可用空间,最多达到 column-count 指定的最大数量。以下示例显示了这一点。
示例
<!DOCTYPE html> <html> <head> <style> .cols1 { columns: 50px 5; } .cols2 { columns: 100px 6; } p{ background-color: lightgreen; } </style> </head> <body> <h2> CSS columns property </h2> <h4> columns: 50px 5 </h4> <div class="cols1"> <p> TutorialsPoint is a comprehensive online learning platform offering tutorials, guides, and resources on a wide range of subjects, including programming, web development, data science, and more. It provides free and paid courses, covering basics to advanced topics, with interactive examples and practical exercises. The platform caters to learners of all levels, from beginners to professionals, helping them build skills through structured content and hands-on practice. TutorialsPoint also features coding playgrounds and forums for community support. </p> </div> <h4> columns: 100px 6 (see in this case although 6 columns are needed only 4 are shown due to the content and available space.) </h4> <div class="cols2"> <p> TutorialsPoint is a comprehensive online learning platform offering tutorials, guides, and resources on a wide range of subjects, including programming, web development, data science, and more. It provides free and paid courses, covering basics to advanced topics, with interactive examples and practical exercises. The platform caters to learners of all levels, from beginners to professionals, helping them build skills through structured content and hands-on practice. TutorialsPoint also features coding playgrounds and forums for community support. </p> </div> </body> </html>
columns 属性的组成属性
columns 包含 column-width 和 column-count 属性。这两个属性可以组合使用以产生 columns 属性的效果。以下示例显示了这一点。
示例
<!DOCTYPE html> <html> <head> <style> .cols1 { column-width: 50px; column-count: 5; } p{ background-color: lightgreen; } </style> </head> <body> <h2> CSS columns property </h2> <h4> column-width: 50px; column-count: 5 </h4> <div class="cols1"> <p> TutorialsPoint is a comprehensive online learning platform offering tutorials, guides, and resources on a wide range of subjects, including programming, web development, data science, and more. It provides free and paid courses, covering basics to advanced topics, with interactive examples and practical exercises. The platform caters to learners of all levels, from beginners to professionals, helping them build skills through structured content and hands-on practice. TutorialsPoint also features coding playgrounds and forums for community support. </p> </div> </body> </html>
支持的浏览器
属性 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
columns | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
css_properties_reference.htm
广告