商品枠の可変型の並ばせ方のCSSは?

質問

DMMやヨドバシのサイトで商品を表示した時
ウインドウのサイズによって、横に表示される
商品の数が変化するCSSがわかりません。

Divの枠にフロートで左詰めに並べると、
枠幅に満たない余分が
右にのみ出来て、商品群の中心がズレてしまいます。

DMMやヨドバシなどの様に
ウインドウサイズにより横並びの個数が適宜変化し、
また左右の余白も等しくしたいのですが
どの様に設定すれば良いのでしょうか?

DMMは商品枠のサイズもウインドウ幅によって
微妙に変化しています。

商品枠については可変・固定のいずれでもOKなので
作り方、ご教授ください。よろしくお願いいたします。

回答No.2

AsarKingChang · ベストアンサー

言ってる意味がわかりました。
そういうことね！。
メディアクエリはどうでしょう？
その商品の数が６個ギリギリで５個とみなされる時
要するに商品が１０0ドットなら、６００未満なら、５個なので
その時に応じたメディアクエリで上書きでもいけますね。
あとは、リサイズをフックしたJQだけど、
CSSだけでとなると、Last-Childが使えない条件っぽいので、
それ位がいいの位かなー。
おそらく、先頭と末尾以外が、パーセントなり計算したマージンで
で書かれているので、揃ったように見えるCSSなのでしょうね。
実サイト覗く方が早いかもですけどね。

回答No.1

AsarKingChang

あまり深く考えずに、
上位層の、DIVにMARGIN入れて、
下位層の、DIVにFLOATで並べればそんだけでいいのでは？
で最後にCLEARだけでいけません？

補足

divで外枠を作り、フロートで左寄せで並べていくと
右端にのみ端数分の余白ができます。
余白が商品の枠の幅を超えると横の並びが一つ増えます。
結果、左はマージンの余白、右はマージンの余白+端数分、
となります。

例えば、商品の枠幅が100px、左右マージンが10Px、
商品の幅の合計が120PXの場合で、外枠が700pxだと、
商品枠5個（120×5）+100px端数、となり
左はマージン10px、右は10px+100pxの余白ができます。
完全に中央がずれます・・・・