[UI] display:inline-blockを使って横並びのレイアウトをする方法

inline-blockを使った段組みレイアウトのパターンです。隙間問題はfont-size:0;で対処しています。ほぼほぼモダンブラウザでは問題ありません。safairは%指定の解釈が他のブラウザと違ってぴったりいかない場合あり。幅の%は『FluidGrids』のものを使っています。floatと違ってカラム落ちしないし、clearfixなど使用しなくてよい点が○。商品一覧ページなどに使えると思います。6分割以上作成したい場合は『FluidGrids』で16分割まで幅のパターンが用意されています。.grid > divのpaddingを0にすれば隙間のないレイアウトになります。.col1of1とかのclass名は最後に意味のある名前（mainとかsubとか）に置換すれば良いと思います。

DEMO

1/1

1/2

1/2

1/3

1/3

1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/4

3/4

1/5

1/5

1/5

1/5

1/5

1/5

4/5

2/5

3/5

1/6

1/6

1/6

1/6

1/6

1/6

1/6

5/6

HTML

 
1/1
 
1/2
 
1/2
 
1/3
 
1/3
 
1/3
 
1/3
 
2/3
 
1/4
 
1/4
 
1/4
 
1/4
 
1/4
 
3/4
 
1/5
 
1/5
 
1/5
 
1/5
 
1/5
 
1/5
 
4/5
 
2/5
 
3/5
 
1/6
 
1/6
 
1/6
 
1/6
 
1/6
 
1/6
 
1/6
 
5/6

CSS

.grid {
 font-size: 0;
}
.grid > div {
 display: inline-block;
 font-size: 14px;
 vertical-align: top;
 padding: .75em;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 background: #f0f0f0;
}
.grid > div > div {
 min-height: 2em;
 line-height: 2;
 background: #34495E;
 color: #FFF;
 text-align: center;
}

使用上のポイント

• 隙間問題はfont-size:0;を使う。
• 幅指定は%『FluidGrids』参照
• Box-sizing対応状況

CSS対応状況

• CSS 2.1 selectors
• CSS3 selectors
• CSS3 Box-sizing
• CSS min/max-width/height