css3多列布局

随''blow...而过

于 2020-08-21 20:29:00 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

文章标签： css3 css 前端 html javascript

本文链接：https://blog.youkuaiyun.com/liatajkd/article/details/133010810

本文详细介绍了CSS3中用于创建多列布局的各种属性，包括column-count、column-fill、column-gap、column-rule等，以及如何使用这些属性来精确控制网页元素的列数、填充方式、间隙大小和边框样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3多列布局

css多列属性

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
columns	设置 column-width 和 column-count 的简写

使用创建多列布局

.box {
            /* 指定元素被分割的列数 */
            column-count: 4;
            /* 填充列 */
            column-fill: auto;
            /* 列与列之间的间隙 */
            column-gap: 40px;
            /* 列边框 */
            column-rule-color: lawngreen;
            column-rule-style: solid;
            column-rule-width: 1px;
        }