css_23_多列布局

双木桑德斯2024-06-29 16:33

常用值：
column-count：指定列数，值是数字。

column-width：指定列宽，值是长度。

columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。

column-gap：设置列边距，值是长度。

column-rule-style：设置列与列之间边框的风格，值与 border-style 一致。

column-rule-width：设置列与列之间边框的宽度，值是长度。

column-rule-color :：设置列与列之间边框的颜色。

coumn-rule ：设置列边框，复合属性。

column-span：指定是否跨列；

值： none 、all。

举例：

css 复制代码

 .outer {
            width: 1000px;
            margin: 0 auto;

            /* 直接指定列数 */
            column-count: 5;

            /* 指定每一列的宽度，会自动计算列数 */
            column-width:220px ;

            /* 复合属性，能同时指定列宽和列数 */
            columns: 4;

            /* 调整列间距 */
            column-gap: 20px;

            /* 每一列的边框宽度 */
            column-rule-width: 2px;

            /* 每一列的边框风格 */
            column-rule-style: dashed;

            /* 每一列的边框颜色 */
            column-rule-color: red;

            /* 边框相关的复合属性 */
            column-rule: 2px dashed red;
        }