通常、ブロック要素を横並びにしたいときは『float』を使うことが多いと思います。しかしfloatには
- clearする必要がある
- IE6ではfloatと同方向のpadding、marginが2倍になってしまう（バグ）
- 高さが異なるボックスがあるとその後のレイアウトが崩れる
といった面倒がつきまといますよね。そんな時は『display: inline-block;』の出番です。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れません。
それでは実際に『display: inline-block;』を使った例を見てみましょう。
html
css
単純にdivを並べ、これらに『display: inline-block;』を指定しました。ここではレイアウトを見るためにボックス3の高さを敢えて変えています。
.ib-box{ display: inline-block; width: 120px; height: 100px; margin: 10px; border: 1px solid #eee; } .height{ height: 150px; border: 1px solid #f66; }いかがでしょうか？ご覧のようにfloatを使わずとも、高さを指定したボックスの横並びが実現できました。さらに高さが異なるボックス3以降のレイアウトも崩れていないのが分かると思います。
しかし『display: inline-block;』はIE6、IE7では使うことができません。
そこでIE6、IE7用にハックを指定してあげる必要があります。
css
とりあえずdisplayをinlineで指定して、zoomでhaslayoutをtrueにする感じです。hasLayoutとはそのオブジェクトがレイアウトを持つかどうかの読み取り専用のプロパティです。zoomを指定することでhasLayoutをtrueにすることができ、それによってheightも指定できるようになるというわけですね。個人的には、CMSを使ってのECサイト作成やギャラリーサイトの構築なんかでよく使ってます。任意の場所でclearかけるのが難しいことが多いので。シンプルにマークアップしたいなって方は是非試してみてください。
それでは。