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