1. auto:默认值。浏览器会尽量平均分配内容到所有列,以保持列的高度相近。
2. balance:浏览器会尽量使所有列的高度相等,即使最后一列的内容较少。
.container {
column-count: 3;
column-fill: balance;
}
在上述例子中,.container 类的元素被分为三列,并且使用 column-fill: balance; 使得所有列的高度尽量相等。这样在多列文本布局中,会使得每一列的内容差不多。
需要注意的是,column-fill 属性的兼容性在一些旧版本的浏览器可能不是很好。在实际使用中,可以根据项目的兼容性需求谨慎选择是否使用这个属性。在某些情况下,通过调整 column-count、column-width 等属性也可以达到类似的效果。
转载请注明出处:http://www.zyzy.cn/article/detail/4163/CSS