0

グリッドで 3 つの異なる画像サイズを使用しているときに Masonry を中央に配置しようとすると問題が発生しました。

JS -

$('#container').masonry({
    itemSelector: '.item',
    //isFitWidth: true, // This setting ignores my max-width or width settings for #container but gives me the result that I'm looking for
    columnWidth: 155
});

CSS -

#container {
    max-width: 940px;
}

@media only screen and (max-width: 768px) {
    #container {
        max-width: 728px;
    }
}

HTML -

<div id="container">
    <ul>
        <li class="item">item</li>
        <li class="item">item</li>
        <li class="item">item</li>
    </ul>
</div>

デフォルトの幅 (940 ピクセル) を使用すると、Masonry は期待どおりに機能しますが、768 ピクセルの最大ソリューションを持つデバイスで表示しようとすると、グリッド項目が中央に配置されなくなります。現在のセットアップを使用してこれを行うことは可能ですか?

4

1 に答える 1

0

max-widthを外側のdivに設定して解決した同様の問題がありました。

これを試してください：

JS

$('#container').masonry({
    itemSelector: '.item',
    isFitWidth: true,
    columnWidth: 155
});

CSS

#wrapper {
    max-width: 940px;
}

@media only screen and (max-width: 768px) {
    #wrapper {
        max-width: 728px;
    }
}

HTML

<div id="wrapper">
    <div id="container">
        <ul>
            <li class="item">item</li>
            <li class="item">item</li>
            <li class="item">item</li>
        </ul>
    </div>
</div>
于 2013-05-16T23:09:55.167 に答える