2009年09月08日 (火) XHTML/CSS/Javascript WebサイトやECサイトにて、商品写真を横幅きっちりに並べたい場合があるかとおもいます。その時リスト系の要素をfloatを用いて横に並べて、商品間を左右marginで調節するなどで再現しますが横きっちりに並べる場合一番右端、あるいは左端のアイテムがしたにずれ込みカラム落ちする場合があります。 原因は親要素の横幅と、floatしている子要素の横幅+marginが親要素の横幅をこえるためです。 その問題が発生しないよう再現しているサイトの中には、一番右端に来る要素に対してclass属性でmarginを0にしたり調整したりする場合がありますが、これにはデメリットがあります。 要素の追加削除によって、いちいちclass属性の位置を調節しなければならない。 ECシステム、CMS実装時、一定のループ時にclass属性を追加するカ