Masonry/Isotope で動作する適切な流体レイアウトの取得に取り組んできました。途中でいくつかの問題に遭遇しましたが、最後の問題は解決できませんでした。
私の目的は次のとおりです。
- その場で写真のサイズを変更する流体同位体画像グリッド レイアウトを有効にします
- 画像グリッドをウィンドウの水平方向の中央に配置します
- 右の列が A) 折り返されたり、B) 中心からずれて表示されたりしないガターを用意します。
私はこの質問を見始めました: jQuery Isotope: Fluid setup like Beyonce's website only works after resizing window , しかし、それはその差し迫った問題を解決するために機能しますが、ガターと複数の列を処理しません.
選択した回答の jsfiddle を編集して、クリーンアップして展開することができました。
(改行がないことをご容赦ください。ただし、jsfiddle は 、ガターを台無しにする列の間に 's を作成していました)。
問題＃1を解決することに成功しました。問題＃2は、幅と幅が設定された親divを作成することで簡単に達成できますmargin: 0 auto;。問題＃3が残ります：
css を使用して各<li>要素にパディングまたは透明な境界線を追加すると (たとえば、margin-right: 10px; margin-bottom: 10px;または同等のものを使用してborder)、問題が発生します。突然、右の列が次の行に折り返されます! display: inline-block;もちろん、これは予想される動作であり、<li>要素 (私が行った) とwhite-space: nowrap;親要素 (私がコメントアウトした) に適用するだけで解決できると期待されます。
残念ながら、nowrap を有効にすると、<ul>要素が親の幅に従わず<div>、すべての画像が 1 行に表示されるという問題のある動作が発生します。
究極の質問:これを適切に機能させるにはどうすればよいでしょうか?3 つの列がガターを挟んで動作し、親要素の左右に完全に整列するようにするにはどうすればよいでしょうか? 画像を浮かせてみましたが、同位体には奇妙な動作があります。