1.10 多列

• 多列容器
  • 简写；
  • 独立属性；
• 间距样式
  • 简写
  • 独立属性
• 列元素指定跨越

多列容器

简写；

    <style>
        div.test {
            columns: 300px 3;
            column-gap: 40px;
    </style>

• columns：column-width 列宽(最小值) 和 column-count 列数量

自动切换列数量
当屏幕宽度不够时，显示列数量为 屏幕宽 / 列宽；

例如：列宽 300px；列数量 3；
屏幕宽 700px；
n = 700 / 300 = 2.333;
所以分成 2 列展示；

注：此处计算 忽略 列间距（column-gap）

• column-gap 列间距

独立属性；

    <style>
        div.test {
            column-count: 3;
            column-width: 300px;
            column-gap: 40px;
        }
    </style>

• column-width 列宽(最小值)

单独设置时
最小列宽，根据屏幕宽度自动调整列数量，屏幕均分

• column-count 列数量

单独设置时
列数量，屏幕均分

间距样式

与 border 类似；

简写

    <style>
        div.test {
            column-count: 3;
            
            column-rule: 1px solid lightblue;
        }
    </style>

独立属性

    <style>
        div.test {
            column-count: 3;
            
            column-rule-style: solid;
            column-rule-width: 2px;
            column-rule-color: lightblue;
        }
    </style>

列元素指定跨越

    <style>
        p.col {
            column-span: all;
        }
    </style>

• column-span

1   元素应跨越一列
all 该元素应该跨越所有列