CSS3 Pre-Reference



column-width

マルチカラムの列の幅

試す

コード

#containe {
    column-width: 20px;
    -moz-column-width: 20px;
    -webkit-column-width: 20px;
}

サンプル

※サポートしていないブラウザでは動作しません。サポートされていない単位(vw、vhなど)でも動作しません。

その後(けむり)したから火がある。吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。

到底(あと)ってしまった。これは減る、しばらくしているがない。

これを守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。しかもあとって行くと。その後(たび)める事やらいくら出してやれといったまま奥へ這入(はい)ったら書生の上から食物(とうてい)いての中である。

コメントする


対応ブラウザ

Firefox
1.5~
Chrome/Safari
3.0~
Opera
まだ
InternetExplorer
まだ

パラメータ

<長さ> | auto
初期値 auto
適用 置換ではないブロック要素、テーブルセル、インラインブロック要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS Multi-column Layout Module#3.1. ‘column-width’

解説

マルチカラムの列の幅を指定します。

Firefoxは列がきちんと埋まるように値を自動的に丸め込みますが、WebKit系は幅指定を尊重し、スペースを作ります。デフォルトの挙動は前者が正しいです。この挙動は’column-fill’で指定できます。

マルチカラム関連のプロパティを指定すると、「カラムボックス」(column box)という特殊なボックスが生成されます。

リキッドレイアウトで、列幅のみ固定して列数を可変にしたい場合に利用できます。

トラックバック

投稿されたコメント