商品写真と説明文のリストなどのための CSS

商品写真と説明文のリストなどのためのスタイルです。

1行ごとに div などでくくる必要がなく、自然なマークアップを行うことができ、運用時にもアイテムの挿入、削除が容易に行えて便利です。

float プロパティを使って横に並べる場合は、高さが違うアイテムがあると変な風に回り込んでしまうため、1行ごとに div などでくくる必要がありました。

inline-block を使えばそれを解決することができます。

inline-block は幅、高さといった、block のような性質と、行の中で並べることができたり、vertical-align を設定できたりといった inline のような性質を併せ持っています。

このサンプルはこの性質を利用しています。

inline-block は Opera, Safariで既に利用でき、Firefox 3 からも利用することができます。

また、IE 6 ,7 でも display:inline; を指定し、加えて zoom:1; などを指定して hasLayout を true にすることでその要素は inline-block のような振る舞いをします。

Firefox 2 以下に対しては、独自拡張である display:-moz-inline-box; を使用します。-moz-inline-box は inline-block にとてもよく似ていますが、かなり癖があるためすこし工夫をして使います。

これらを組み合わせることで、

で同じようなレイアウトを実現することができます。

詳細はまたのちほどまとめたいと思います。

http://www.yomotsu.net/lab/css/itemlist/trackback

この記事へのコメントはまだありません

このページの目次