CSS_Column多列布局与break-inside: avoid

BGU解决方法
break-inside: avoid;
解决瀑布流图片队列文字换列问题
不加break-inside: avoid;
我们可以发现3有一部分到第二列去了

加break-inside: avoid;
3会在自己所占的这一列，不会换到第二列去

1.多列属性
column-count
column-count：指定了需要分割的列数

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
将 <div> 元素中的文本分为 3 列

2.列间的间隙
column-gap
column-gap：指定了列与列间的间隙

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
- 指定了列与列间的间隙为 40 像素

3.列间的边框样式
column-rule
column-rule：指定了列与列间的边框样式

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
- 设置了列直接的边框的厚度，样式及颜色

4.元素跨越多少列
column-span
column-span：指定元素跨越多少列

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

- 指定 <h2> 元素跨越所有列

5.列的宽度
column-width
column-width：指定了列的宽度

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}】
- 指定了列的宽度100px