inline-block

| コメント(0)
最近、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>

いくつかのブラウザに対応させるために
少し記述が多くなりますが、使う価値はあると思います。

コメントする

このブログ記事について

このページは、gravity-worksが2010年3月 4日 10:28に書いたブログ記事です。

ひとつ前のブログ記事は「div内でfloatを使うときの注意点」です。

次のブログ記事は「リストなどで頭の1文字を前に出す方法」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。