レスポンシブルでCMSで吐き出されいるアイテムの間にアイテム要素、横幅100％にして要素を入れたい

Question

<div class="container">
   <div></div>
   <div></div>
   <div></div>
         |
   <div></div>
   <div></div>
</div>

レスポンシブルデザインでCMSで吐き出されているアイテムの間に　アイテム要素、横幅100％にして要素を入れたいです。
CMSなので大枠のボックスにしかclass名がついてないです。

Comments

[Lhankor_Mhy]

CSS をご提示ください。

Answer 1

ざっと流し読みしただけなので、
具体的にどういった用途かは分かりませんが、
最近、似たような試行錯誤をしました。

自分の場合は、Amazonのトップページのように、
「イベント情報」がズラッと並んだ感じにしたかったのです。

自分は、Javascriptが分からない人なので、9枠分の要素を作って、
レスポンシブの可変に合わせて、余った要素を非表示にする方法にしました。

各要素に、1～9までclassで番号を振っておいて、
4枠×2段なら、最後の一つを非表示にするわけです。

3枠×3段ならそのまま表示して、2枠×4段なら最後を非表示。
スマホで1枠になったら、多すぎたので7～9つ目までを非表示にしました。

Comments

[unoman]

ありがとうございます！
position: absolute;でオブジェクトを置くと前の吐き出されたオブジェクトの下にドンずきになります。
当然絶対値なのでその箇所から下にオブジェクトがレスポンシブルで広がっていき崩れていきますね。
消しちゃうと、コンテンツが消えてしまうので・・・うーん

[Mania]

CMSで、自分でclassが付けられないのですね…。
ちょっと読んでなかったです。

いけるかどうか分かりませんが、
jQuery プラグイン Masonry とか見てみては？

[unoman]

ありがとうございます！
まだ試してはいないのですが、なんか希望が持てそうなプラグインですね！
試してみます

[Mania]

Masonry がご期待に沿えるかは分からないですが、
余りが出ても目立たなくなるのはメリットかなと…。

あと、いま自分が弄っているJQuery プラグイン Slickですと、
レスポンシブごとに要素の数を変えられますね。
ただ、classが付いていないと、実装が難しいかもしれません。

CMS自体に、本当にclassが付けられないのでしょうか？
今どき、ちょっとありえないような仕様なように思うのですが…。

[unoman]

自分も Slickを入れています。absoluteで配置してるため、起点がないから画面を広げていくと下に広がっていくんですよ。中央だったら良かったのですが駄目でした。
transform-originとかもだめですね。

[Mania]

ちなみに、そのCMS名は？
いっそのこと他に変更したほうが、精神衛生上は良いのでは？