CSS columns 属性

定義と使用法

columns属性は、列の幅と列数を設定するためのショートカット属性です。

参照してください：

CSS3チュートリアル：CSS3 多列

HTML DOMリファレンスマニュアル：columns属性

例

列の幅と列数を指定します：

div
{
columns:100px 3;
}

実際に試してみてください

ページの下部にさらに例があります。

CSS语法

columns: column-width column-count;

属性値

値 説明
column-width 列の幅。
column-count 列数。

技術的詳細

デフォルト値： auto auto
継承性： no
バージョン： CSS3
JavaScript语法： object.style.columns="100px 3"

さらに例

Column-count
div要素内のテキストを3列に分けます。
Column-gap
div要素内のテキストを3列に分け、間隔を30ピクセルに設定します。
Column-rule
列の幅、スタイル、色を指定します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

「-webkit-」または「-moz-」で始まる数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
50.0
4.0 -webkit-		 10.0 52.0
9.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1