2段組または3段組の文章を作成するためのCSS

2013年5月14日現在は、「display:table」等を使って(記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)」参照)2段組または3段組の文章を作成しています。
2段組または3段組の文章を作成するためのCSSについての覚書です。
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム


以下のCSSを追加し、

.box2 {
width:45%;
float:left;
padding:10px;
}

.box3 {
width:30%;
float:left;
padding:7px;
}

以下のHTMLを投稿編集画面に記述すると、

<div class="box2" >2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム </div>
<div class="box2" >2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム </div>
<div class="box3" >3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム </div>
<div class="box3" >3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム </div>
<div class="box3" >3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム </div>

以下のように表示されます。

2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム
2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム

#2011, #nodisplay