『float』ではなく『display: inline-block;』を使うという選択

通常、ブロック要素を横並びにしたいときは『float』を使うことが多いと思います。しかしfloatには

• clearする必要がある
• IE6ではfloatと同方向のpadding、marginが2倍になってしまう（バグ）
• 高さが異なるボックスがあるとその後のレイアウトが崩れる

といった面倒がつきまといますよね。そんな時は『display: inline-block;』の出番です。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れません。

それでは実際に『display: inline-block;』を使った例を見てみましょう。

html

<div class="ib-box">ボックス1</div>
<div class="ib-box">ボックス2</div>
<div class="ib-box" style="height: 150px;">ボックス3</div>
<div class="ib-box">ボックス4</div>
<div class="ib-box">ボックス5</div>
<div class="ib-box">ボックス6</div>
<div class="ib-box">ボックス7</div>
<div class="ib-box">ボックス8</div>

css

.ib-box{
  display: inline-block;
  width: 120px;
  height: 100px;
  margin: 10px;
  }

単純にdivを並べ、これらに『display: inline-block;』を指定しました。ここではレイアウトを見るためにボックス3の高さを敢えて変えています。

いかがでしょうか？ご覧のようにfloatを使わずとも、高さを指定したボックスの横並びが実現できました。さらに高さが異なるボックス3以降のレイアウトも崩れていないのが分かると思います。

しかし『display: inline-block;』はIE6、IE7では使うことができません。
そこでIE6、IE7用にハックを指定してあげる必要があります。

css

.ib-box{
  display: inline-block;
  /display: inline;  /* IE用ハック */  /zoom: 1;  /* IE用ハック */  width: 120px;
  height: 100px;
  margin: 10px;
  }

とりあえずdisplayをinlineで指定して、zoomでhaslayoutをtrueにする感じです。hasLayoutとはそのオブジェクトがレイアウトを持つかどうかの読み取り専用のプロパティです。zoomを指定することでhasLayoutをtrueにすることができ、それによってheightも指定できるようになるというわけですね。個人的には、CMSを使ってのECサイト作成やギャラリーサイトの構築なんかでよく使ってます。任意の場所でclearかけるのが難しいことが多いので。シンプルにマークアップしたいなって方は是非試してみてください。

それでは。