商品画像掲載のページ構成CSS

ネタ元：商品画像掲載のページ構成css or table?

なかなか語られることのない、Web制作の問題点が議論されています。

この問題はheightLine.jsを使ったり、tableで組むことで解決できるのですが、なんかそれをやると負けた気がする人がいるのも理解できます。

ですので、私が最近使っている方法を紹介。

サンプル

コードに関してはサンプルから参照してください。

行ごとにブロックレベル要素で包み、その要素(サンプルではul要素)に対して、商品のリスト表示に使っている要素(サンプルではli要素)にかかっている物とおなじfloatプロパティを適用します。

副産物として、行ごとにブロックレベル要素で包んでいるのでclassを適用することにより背景色を変更することができます。

このマークアップも好みが分かれる所だと思いますが参考までに

関連エントリー

高さの異なるカラムをそろえるスタイルシート
CSSでロールオーバーもどき
CSSで実現するスマートなロールオーバー
BIR-もうひとつの画像置換
tableの膨張を防ぐ【css tips】

スポンサードリンク

«Mac始めました-AirMacとAOSSを接続する方法- | メイン | ブックマーク数付きリンクが簡単に作れるブックマークレット»