display : inline-blockで横並びのボックスの高さを合わせる

CSS 2.1 で定義されている display プロパティの値の一つ

この指定をすることでfloat:left等で指定した横並びのボックスの行の高さを、
一番高さが高いボックスの高さに揃えることができます。

また、text-alignでセンタリングできたり、
vertical-align を middle や bottom 指定で上下中央揃え、下揃え等が可能です。

inline-block は横幅がいっぱいになると自動で次の行を作り出し折り返すので
高さが違う box が並んでいる複数の行を作ることができます。

尚、コードにはIE7以下用に下記のCSSハックが必要です。

div　｛
/display: inline;
/zoom: 1;
｝

Tweet