CSS-多列布局

最新推荐文章于 2024-11-06 22:30:59 发布

原创最新推荐文章于 2024-11-06 22:30:59 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

本文介绍了CSS中用于创建多列布局的属性，如column-count用于设定列数，column-gap控制列间距，column-rule设置列间边框，column-fill决定列高度是否平衡，column-span则允许元素横跨所有列。这些属性提供了更灵活的网页设计可能性。

多列布局

    1.column-count
    属性规定元素该被分隔的列数，适用于除table外的非替换块级元素，table cells；inline-block元素
    
    2.column-gap
    属性规定列之间的间隔大小
    
    3.column-rule
    设置或检索对象的列与列之间的边框，复合属性
    column-rule-color: 规定列之间规则的颜色
    column-rule-style:规定列之间规则的样式
    column-rule-width:规定列之间规则的宽度
    
    4.column-fill
    设置或检索对象所有列的高度是否统一
    auto:列高度自适应内容
    balance:所有列的高度以其中最高的一列统一
    
    5.column-span
    设置或检索对象元素是否横跨所有列
    none：不跨列
    all；横跨所有列
    
    6.column-rule-width
    设置或检索对象每列的宽度