floatを使わずにinline-blockで横並びにする方法

floatを使ってボックスを横並びにする場合、その中で高さが違うボックスが混ぜっていると、そこでレイアウトが崩れてしまいます。ブログやCMSなど自動的にボックスを生成するとき、高さの違うボックスがでてくる場合があるので、この方法を知っておくと便利だと思います。

floatで横並びにするとレイアウトが崩れる場合がある

先述しましたが、floatで横並びにすると高さが違うボックスが混ぜっている場合、レイアウトが崩れてしまいます。

 
<div class="wrap">
    <div class="box">float 1</div>
    <div class="box height">float 2</div>
    <div class="box">float 3</div>
    <div class="box">float 4</div>
    <div class="box">float 5</div>
    <div class="box">float 6</div>
</div>
 

floatで横並びにしたサンプル

1行ごとに<div>などでくくる

崩れないようにするためには1行ずつ<div>などでくくる必要があります。

 
<div class="wrap">
    <div class="row">
        <div class="box">float 1</div>
        <div class="box height">float 2</div>
        <div class="box">float 3</div>
    </div>
    <div class="row">
        <div class="box">float 4</div>
        <div class="box">float 5</div>
        <div class="box">float 6</div>
    </div>
</div>
 

1行ずつくくったサンプル

inline-blockを使えば、高さが違うボックスが並んでもレイアウトが崩れない

これを使えば自動的に生成されたボックスも、レイアウトを崩さず横に並べることができます。ただ、inline-blockは並べた要素に隙間ができてしまうので、HTMLにコメントを入れてそれを防いでいます。Firefox 2にはinline-boxの代わりに-moz-inline-boxを使い、IE5～7はdisplay: inlineを書きzoom:1;を指定（haslyaoutをtrueに）します。

 
<div class="wrap">
    <div class="box">float 1</div><!--
 --><div class="box height">float 2</div><!--
 --><div class="box">float 3</div><!--
 --><div class="box">float 4</div><!--
 --><div class="box">float 5</div><!--
 --><div class="box">float 6</div>
</div>
 

 
div.box {
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
}
 
 

inline-blockを使ったサンプル

nth-child()疑似クラスで対応

横に並ぶボックスの数があらかじめ決まっていれば、CSS3で定義されているnth-child()疑似クラスを使って横並びにする方法もあります。詳しくは数個おきのブロックにclearを指定して横並びをclearする方法をご覧ください。

blog comments powered by Disqus