試一試
column-fill: auto;
column-fill: balance;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather.
</p>
</section>
#example-element {
width: 100%;
height: 90%;
columns: 3;
text-align: left;
}
語法
css
/* Keyword values */
column-fill: auto;
column-fill: balance;
/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;
column-fill 屬性被指定為下面列出的關鍵字值之一。初始值是 balance，因此內容將會在各列之間平衡。
值
auto-
各列按順序填充。內容只佔用它所需的空間，可能會導致某些列保持為空。
balance-
內容在各列之間平均分配。在分段上下文中，例如分頁媒體，只有最後一個分段會被平衡。因此，在分頁媒體中，只有最後一頁會被平衡。
規範定義了一個 balance-all 值，其中內容在分段上下文中（例如分頁媒體）會在各列之間平均分配。此值尚不受任何瀏覽器支援。
正式定義
正式語法
column-fill =
auto |
balance |
balance-all
示例
平衡列內容
HTML
html
<p class="fill-auto">
This paragraph fills columns one at a time. Since all of the text can fit in
the first column, the others are empty.
</p>
<p class="fill-balance">
This paragraph attempts to balance the amount of content in each column.
</p>
CSS
css
p {
height: 7em;
background: #ffff99;
columns: 3;
column-rule: 1px solid;
}
p.fill-auto {
column-fill: auto;
}
p.fill-balance {
column-fill: balance;
}
結果
規範
| 規範 |
|---|
| CSS Multi-column Layout Module Level 1 # cf |
瀏覽器相容性
載入中…
警告：由於規範中未解決的問題，column-fill 在不同瀏覽器中存在一些互操作性問題和錯誤。
特別是，當使用 column-fill: auto 按順序填充列時，Chrome 僅在多列容器在塊方向（例如，在水平書寫模式下的高度）具有大小時才會考慮此屬性。Firefox 始終會考慮此屬性，因此在沒有大小的情況下會將所有內容填充到第一列中。