こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

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


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

投稿日時 - 2018-04-30 16:51:45

QNo.9493747

困ってます

質問者が選んだベストアンサー

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

投稿日時 - 2018-05-01 08:13:16

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

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

投稿日時 - 2018-04-30 21:24:27

補足

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

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

投稿日時 - 2018-05-01 01:27:50

あなたにオススメの質問