試一試
columns: 2;
columns: 6rem auto;
columns: 12em;
columns: 3;
<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. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
#example-element {
min-width: 21rem;
text-align: left;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* Column width */
columns: 18em;
/* Column count */
columns: auto;
columns: 2;
/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* Global values */
columns: inherit;
columns: initial;
columns: revert;
columns: revert-layer;
columns: unset;
columns 屬性可以指定為下面列出的一個或兩個值，順序不限。
值
<'column-width'>-
理想的列寬，定義為
<length>或關鍵字auto。實際寬度可能會更寬或更窄，以適應可用空間。請參閱column-width。 <'column-count'>-
元素內容應該流入的理想列數，定義為
<integer>或關鍵字auto。如果此值和列寬都不是auto，則它僅表示允許的最大列數。請參閱column-count。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 塊容器，除了表格包裝盒 |
| 繼承性 | 否 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性
|
正式語法
columns =
[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<column-height> =
auto |
<length [0,∞]>
<length-percentage> =
<length> |
<percentage>
示例
設定三等分列
HTML
html
<p class="content-box">
This is a bunch of text split into three columns using the CSS `columns`
property. The text is equally distributed over the columns.
</p>
CSS
css
.content-box {
columns: 3 auto;
}
結果
規範
| 規範 |
|---|
| CSS Multi-column Layout Module Level 1 # columns |
瀏覽器相容性
載入中…