質問: ### 前提・実現したいこと Jquery「Masonry」に1カラムの行を設けたい。 現在、xhtmlで写真がレンガ状に並ぶようJquery「Masonry」を用いてページを作っています。横幅100%で作っています。 基本は、画像の幅が固定、高さ可変のものが並ぶので画面幅によって、カラム数は変わってきます。 ここまではきちんと再現できたのですが、途中に1カラム(width100%)のものを挟みたいという要望があるのですが、1カラムの部分だけ左右の余白がうまくいきません。 それだったら、1カラムの部分は、その他の複数カラムの幅に合わせたいと思うのですがなかなかうまくいかず困っております。 ### 現状 ・1カラムの部分を除いては正しく動いている。 ・1カラムの部分の左右の余白が正しく設定されない。 ・ロードした時は良いが、画面の幅を縮めると、1カラムの下の余白が200px近く開き、 画面幅を元に戻してみると、1カラムの部分の高さが無視されて、1カラムの下の行が重なって表示される。 すべては1カラムの部分がなければ正常に動くのですが、1カラムの部分を入れたいがために苦労をしています。。。 ### 該当のソースコード ざっくりと必要と思われる部分を抜粋します。 こちらでは1枚目のph1.jpgが1カラムで表示したい画像の想定です。 ``` ●html● ↑このこだけwidth100%で他の行と同じになるように左右に余白を入れたいです。 ``` ``` ●css● #photos_wrap { padding-top: 50px; width: 100%; text-align: center; } #photos{ width: 100%; display: inline-block; } .p_box { float: left; width: 310px; padding: 3px; } .col1 { width: 100%; float: left; display:block; margin-bottom:0 !important; } .p_box img{ width: 100%; height: auto; } .col1 img{ width: 100%; } ``` イメージとしては下記のような感じです。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f3c1916b65108c7d0ade0ecd6ed2979e.gif) ### 追加の問題 kei344様からご回答いただいた通り、masonry を複数使うことで 1カラムの部分がきれいに100%になる様になりました! が、私自身も認識の誤りがあったのですが、1カラムの部分は、下のカラムと 幅を合わせたいです。 jquery,javascriptの知識がないに等しいのですが、 下記で簡単に取得できそうなものなのですが、うまくいきません。 <#photos→ 複数カラムのwrap、#photos2→ 1カラムのwrapです。> ``` $(function(){ var w=$("#photos").width(); $("#photos2").width(w); }); ``` ブラウザを広げるとサイズによっては下記のような感じになるので、#photos、#photos2のmarginを合わせられたらと思っております。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/dd78325dbe33f35874379fa916edf82b.gif) どの様にコードをかけば、きちんと#photosの幅を取得して、#photos2に取得することができるのでしょうか? teratailを使い始めて間もないので、 エンジニアの方たちに不快な思いをさせてしまうかもしれません。 またteratailにおいて本質問がお門違いでしたらすみません。 何卒よろしくお願いいたします。
回答: masonry を複数使って、幅100% の要素を挟んでは? ``` ``` **追記:** こういう設定があるようです。 【レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント: 小粋空間】 > > 4.カラムレイアウト幅を要素全体の幅に追従させる > > カラムレイアウトの幅を要素全体の幅に追従させるためには、プラグイン起動時のオプションとして「isFitWidth」を設定します。 > > > > ``` > $('#container').masonry({ > isFitWidth: true, > }); > ``` > >