列填充 | column-fill
该column-fillCSS属性控制内容是如何分割成列。
/* Keyword values */
column-fill: auto;
column-fill: balance;
/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: unset;内容要么是平衡的，这意味着所有列中的内容将具有相同的高度，要么在使用auto时只占用内容需要的空间。
Initial value | balance |
|---|---|
应用对象 | multicol elements |
是否可继承 | no |
媒体 | visual, but, in continuous media, has no effect in overflow columns |
计算值 | as specified |
动画类型 | discrete |
规范顺序 | per grammar |
语法
下面列出的关键字值之一。
值
auto一个关键字，指示按顺序填充列。balance是一个关键字，指示内容在列之间均分。
形式语法
auto | balance | balance-all实例
.content-box {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
height: 200px;
}规范
Specification | Status | Comment |
|---|---|---|
CSS Multi-column Layout ModuleThe definition of 'column-fill' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 13.0 (13.0)-moz 52.0 (52.0)1 | ? | ? | ? |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | (Yes) | 13.0 (13.0)-moz 52.0 (52.0)1 | ? | ? | ? | (Yes) |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
