マルチカラムの段の数を指定するには？

column-countの解説

要素書式

column-count:【段の数】;

対応ブラウザ

IE 9：×
Firefox 10.0：○（-moz-column-count）
Opera 11.6：○
Chrome 16.0：○（-webkit-column-count）
Safari 5.1：○（-webkit-column-count）

※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。

値一覧

値

内容

段の数

マルチカラムの段の数を指定します。
指定できる値は次の通りです。
「auto」：カラムの数がほかのプロパティ（段の間隔column-gapを考慮したうえで全体の幅を段の幅column-widthで割ります）によって決定されます。
「整数値」：1以上の数を指定します。
また「column-width」と「column-count」が両方とも「auto」以外の値を持つ場合、実際の段の数は「column-count」で指定した数より小さくなる場合があります。（column-widthで指定した段の幅が大きいと、必要な段数を確保できないため）
なお、「column-count」プロパティの初期値は「auto」となります。

解説文

従来、Webページで段組（マルチカラム）のレイアウトを実現するには、tableタグやfloatプロパティを使用する必要がありました。
CSS3では、段組を指定するための専用のプロパティが用意されています。

段組を作成する場合、column-countプロパティを使って段の数を指定することができます。

次のサンプルでは、コンテンツは横に２段になって表示されます。
縦書き(writing-mode:vertical-rl)のときは縦に２段になって表示されます。

サンプルソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
div{
    width: 600px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
}
</style>
</head>
<body>
<div>
<p>彼は歩きながら、自分がどうして宇宙飛行士になりたかったのかを考え始め た。
それは、人類が初めて月に到達した日から、いつか自分も宇宙から地球を見てみたいと思っていたからであった。</p>
<p>今までもそのための努力はしてきた。そのつもりだったが、実際のところは行き詰まり感が彼の感情を支配していた。
そんな彼に忘れかけていた宇宙への憧れを思い出させたのが、彼女のあの言葉だったのだ。</p>
</div>
</body>
</html>

column-countの解説