項 目 | 説 明 |
---|---|
記述形式 | セレクタ {column-fill: 値 } |
値 の形式 | balance,auto |
初 期 値 | balance |
対応ブラウザー | C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa?+ |
適用可能な要素 | 複数段になっている要素 |
継 承 | しない |
column-fill プロパティ は,段組の 段ごとの高さ(長さ)を揃えるかどうか を指定します。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
balance | 可能な限り調整して高さ(長さ)を揃えます。 (初期値) |
auto | 前詰めで収めていきます。 |
備 考 |
|
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.mc30 { width: 40em; height: 9.2em; column-count: 3; column-fill: auto; border: solid blue 3px; } div.mc31 { width: 40em; height: 9.2em; column-count: 3; column-fill: balance; border: solid blue 3px; } --> </style> |
HTML <body> ~ </body> |
<div>column-fill: auto; の場合</div> <div class="mc30"> <p>他のプロパティの値に基づき段数を決めます。 (初期値) <br>たとえば,column-width が auto 以外の値の場合には, それに基づいて段数を決定します。</p> <p>段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。</p> </div> <br> <div>column-fill: balance; の場合</div> <div class="mc31"> <p>他のプロパティの値に基づき段数を決めます。 (初期値) <br>たとえば,column-width が auto 以外の値の場合には, それに基づいて段数を決定します。</p> <p>段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。</p> </div> |
ブラウザー 表示例 |
---|
column-fill: auto; の場合
他のプロパティの値に基づき段数を決めます。 (初期値)
段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。 column-fill: balance; の場合
他のプロパティの値に基づき段数を決めます。 (初期値)
段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。 |