CSS columns 屬性
更多“自己嘗試”的例子見下文。
定義和用法
columns
屬性是以下屬性的簡寫:
column-width 部分將定義每列的最小寬度,而 column-count 部分將定義最大列數。使用此屬性,多列布局將在窄瀏覽器寬度下自動分解為單列,而無需媒體查詢或其他規則。
預設值 | auto auto |
---|---|
繼承 | no |
可動畫 | 是的,參見單個屬性。 閱讀關於可動畫的內容 嘗試 |
版本 | CSS3 |
JavaScript 語法 | object.style.columns="100px 3" 嘗試 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
columns | 50 | 10 | 52 | 9 | 37 |
CSS 語法
columns: auto|column-width column-count|initial|inherit;
屬性值
值 | 描述 | 演示 |
---|---|---|
auto | 預設值。將 column-width 和 column-count 都設定為 "auto" | 演示 ❯ |
column-width | 定義每列的最小寬度 | 演示 ❯ |
column-count | 定義最大列數 | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
相關頁面
CSS 教程: CSS 多列
HTML DOM 參考: columns 屬性