TOP  >  CSS・スタイルシートTIPS  >  display : inline-blockで横並びのボックスの高さを合わせる

2009年06月16日 01:13

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

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

display : inline-block

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



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

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

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

div {
/display: inline;
/zoom: 1;

TOP  >  CSS・スタイルシートTIPS  >  display : inline-blockで横並びのボックスの高さを合わせる




正当なCSSです!