0

ふぅ、お久しぶりです。とにかく、私は自分の小さな実験に苦労しています。私がやりたいことは、動的なコンテンツでページを埋め、それに応じて Masonry によって配置されることです。これが私のコードの一部です：

* {
    margin: 0;
    padding: 0;
}

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.photo { width: 25%; }

.photo img { width: 100%; }

そして、Masonry は通常どおり呼び出されます。

$(function() {
    $('#container').imagesLoaded(function() {
        $('#container').masonry({
            itemSelector: '.photo',
            isAnimated: false
        });
    });
});

ただし、ページを表示すると、すべての写真が重なっているか、ランダムな余白があり、ウィンドウ サイズ/画面解像度に合わせてコンテンツが伸縮しません。

私が望んでいるのは、「タイル張りの背景」表示をシミュレートするために、ウィンドウ サイズ/画面解像度に関してサイズを変更して、写真が Web ページ全体を埋めることができるようにすることです。これに加えて、Masonry を使用して写真のシームレスな配置を実現したいと考えています (余白は一切ありません)。Masonry を使用した「グリッド」レイアウトの例をいくつか調べましたが、私のシナリオに適用しても機能しないようです。

これについて何か助けていただければ幸いです！

4

1 に答える 1

0

希望どおりに動作させるには、「float: left」と「margin: 0 auto」を追加する必要があります。

.photo { width: 25%; float: left; margin: 0 auto}

http://jsfiddle.net/mastermindw/Wuwsh/2/

于 2013-06-02T21:17:42.200 に答える