CSS列入力プロパティ

列の入力方法を指定します。

.newspaper1 {
column-fill: auto;
}

.newspaper2 {
column-fill: balance;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このcolumn-fillプロパティは、バランスが取れているかどうかに関係なく、列を埋める方法を指定します。

ヒント：複数列の要素に高さを追加すると、コンテンツが列をどのように塗りつぶすかを制御できます。コンテンツは、バランスをとったり、順番に埋めたりすることができます。

デフォルト値：	残高
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.columnFill = "auto"

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

数字の後に-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。

Property
column-fill	50.0	10.0	52.0 13.0 -moz-	10.0 7.0 -webkit-	37.0

column-fill: balance|auto|initial|inherit;

Value	Description
balance	Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally)
auto	Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

<div>要素のテキストを3つの列に分割します。

div {
column-count: 3;
}

列間に40ピクセルのギャップを指定します。

div {
column-gap: 40px;
}

列間のルールの幅、スタイル、および色を指定します。

div {
column-rule: 4px double #ff00ff;
}