CSS3カラム-countプロパティ
例
テキストは、次の3つの列にdiv要素分かれています。
div要素
{
列数:3。
-moz-列数:3; / * Firefoxの* /
-webkit-列数:3; / * SafariやChromeの* /
}
{
列数:3。
-moz-列数:3; / * Firefoxの* /
-webkit-列数:3; / * SafariやChromeの* /
}
»をお試しください
より多くの例については、このページの下で。
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
属性 | |||||
---|---|---|---|---|---|
column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
属性の定義と指示
コラム-countプロパティは、要素の列の数が分割されるべきで指定します。
デフォルト: | オート |
---|---|
継承: | いいえ |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.columnCount = 3 |
文法
column-count:number|auto;
値 | 説明 |
---|---|
数 | 列の最適数とは、要素の内容が流出することはできません |
オート | 「列幅」列の数は、次のような他の属性に依存します |
それを自分で試してみてください - 例
カラムギャップ
3列にdiv要素内のテキスト、および30ピクセルの列の間のギャップを指定します。
列のルール
幅、スタイル、色:ルールは、列の間を指定します。
関連記事
CSS3チュートリアル: CSS3の複数列