最近、display:inline-block; を良く使っています。
名前の通り display:inline; と display:block; の性質を持っていて、
指定したタグの内側はblock要素、外側はinline要素になります。
なので、
・ボックスが横並びになる
・vertical-align が使えるようになる
・（上の2つを）height を決めなくても使える
というメリットがあります。
ボックスを横にならべるのは float:left; でも問題ないのですが、
繰り返し並べて自動改行される場合は
height を合わせないとズレてしまうことがあります。
使い方は以下のようになります。
タグが1つ増えてしまうのが欠点でしょうか＾＾；
■CSS
.sample {
width: 200px;
display: -moz-inline-box; /*FireFox2以下用*/
display: inline-block;
/display: inline; /*IE7以下用*/
/zoom: 1; /*IE7以下用*/
}
.sample div{ /*FireFox2以下用*/
width:200px;
display:block;
}
■HTML
<div class="sample"><div>内容</div></div>
いくつかのブラウザに対応させるために
少し記述が多くなりますが、使う価値はあると思います。
名前の通り display:inline; と display:block; の性質を持っていて、
指定したタグの内側はblock要素、外側はinline要素になります。
なので、
・ボックスが横並びになる
・vertical-align が使えるようになる
・（上の2つを）height を決めなくても使える
というメリットがあります。
ボックスを横にならべるのは float:left; でも問題ないのですが、
繰り返し並べて自動改行される場合は
height を合わせないとズレてしまうことがあります。
使い方は以下のようになります。
タグが1つ増えてしまうのが欠点でしょうか＾＾；
■CSS
.sample {
width: 200px;
display: -moz-inline-box; /*FireFox2以下用*/
display: inline-block;
/display: inline; /*IE7以下用*/
/zoom: 1; /*IE7以下用*/
}
.sample div{ /*FireFox2以下用*/
width:200px;
display:block;
}
■HTML
<div class="sample"><div>内容</div></div>
いくつかのブラウザに対応させるために
少し記述が多くなりますが、使う価値はあると思います。
