[CSS]floatを利用せずにdisplay:inline-blockで要素を横並びにする方法

グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSのfloatやdisplayを使うことが多いと思います。

floatとdisplayとでは見え方にどのような違いがあるか？について、サンプルも交えて紹介いたします。

float:left の場合

まずはfloat:leftで要素を横並びにするサンプルです。

各要素が横並びになりますが、float:の場合は、回り込み解除の処理も同時に必要になります。

display:inline-block の場合

display:inline-blockを利用する場合のサンプルです。

同じく各要素は横並びになりますが、要素間の隙間が生じます。

display:inline-block による横並びを IE7 以下にも対応させる

display:inline-blockを使う場合は、display:inlineとzoom:1を併用することでIE6、IE7 にも対応させてあげます。

要素の縦位置を揃える

display:inline-blockを使う場合は、vertical-align:で要素の上下方向の位置調整が可能です。

各要素が横並びになり、要素間の隙間が生じますが、vertical-align:middleによって上下方向の位置を中央揃えにすることができます。


display:inline-blockによって要素間に生じた隙間を消す方法は、別途[CSS]CSS の display:inline-block で並べた要素間の隙間をなくす方法の記事で紹介しておりますので、こちらも合わせて参考にしてみてください。