CSS3 column-fill 属性
CSS3 column-fill 属性
CSS3 column-fill 属性设置内容分栏的填充方式。
应用场景: 当将内容分成多个栏时,为了使页面整齐美观,我们需要一些方法来调整内容的分布和填充方式。此时, column-fill 属性就非常实用,通过它我们可以调整内容分栏的填充方式,使页面更美观。
语法
column-fill: balance | auto | initial | inherit;
取值
balance
- 每一列的高度尽量相等,适合填充内容较少的情况。auto
- 自动填充,每一列的高度可能不相等,适合填充内容较多的情况。initial
- 设置为默认值。inherit
- 从父元素继承。
实例
div{
-webkit-column-count: 3; /* 多列布局 */
-moz-column-count: 3;
column-count: 3;
column-fill: auto; /* 自动填充 */
}
在上述实例中,我们设置了将页面分成三栏布局,并使用 column-fill 属性将内容自动填充至每一栏,这样可以避免某个栏过多或过少,使得页面更加美观。
浏览器支持
Chrome | Firefox | Safari | Opera | Edge | Internet Explorer |
---|---|---|---|---|---|
50.0 | 52.0 | 10.1 | 37.0 | 12.0 | No |
注意事项
column-fill
属性必须与column-count
属性一起使用。- 使用
column-fill
属性时,浏览器会尝试将内容平均分配到每一列中,如果某一列的内容太多,会导致其他列无法填满,这时会出现空白,因此在使用该属性时需要灵活掌握,根据实际情况进行调整。
总结
CSS3 column-fill 属性非常实用,在进行页面设计时,可以根据分栏的具体情况选择适当的取值,使得页面更加美观。同时,需要注意该属性的使用方法和注意事项,以免出现不必要的错误。