2

単純な画像のコラージュを作成しようとしていますが、この問題のために石積みを使用する必要があります:正方形のdivグリッド、float:leftの問題(画像を含む)

非常に簡単だと思いましたが、実装の何が問題になっているのか理解できません:http: //classicopia.ivointeractive.com/。道の終わりにある家の写真は、その右上隅にあるはずです。間隔は完全で(970 = 2 * 291 + 388)、画像はfloat:leftプロパティを介してそこに配置されますが、石積みスクリプトは画像を所定の位置から外します。

コンテナ全体の幅を大きくすると、これら2つの画像はスタックされたままになりますが、右に移動します。これは、石積みが何があっても2つの列しか作成していないことを意味しますか?この番号を変更するにはどうすればよいですか?

4

1 に答える 1

1

組積造が正しく機能するには、同じ幅の柱が必要です。.masonry-bricksは、DOMに表示される順序で#containerに配置されます。2列または1.5列にまたがる大きな.masonry-bricksがある場合、適切なフィッティングレイアウトが得られません。適合できない「FallStyles...」.col6divも参照してください。

ギャップが発生する可能性がある時期と理由を理解するには、 http://masonry.desandro.com/demos/basic-multi-column.htmlを参照してください。任意の数の列が可能であることがわかりますが、レイアウトは基本的な列の幅と、.masonry-brick幅の最小公約数でそのモジュール性に一致する要素に依存します。

固定幅の#containerは、あなたの場合のように、あまり意味がありません。Masonryの目的は、ブラウザーとデバイス間でブラウザーウィンドウのサイズ変更の柔軟なレイアウトを有効にすることだからです。ただし、中央に#containerを配置することもできます。

同様の問題については、 https://stackoverflow.com/a/12525917/963514も参照してください。

于 2012-09-23T08:29:18.373 に答える