0

私の人生では、流体/パーセンテージレイアウトを使用するときに、幅の広いガターを削除して0に設定する方法を理解できません。

gutterWidth: 0に設定とマージンとパディングを試しまし0%たが、それでも機能しません。

これが石積みサイトのコードです。

$('#container').masonry({
    itemSelector: '.box',
    gutterWidth:0,
// set columnWidth a fraction of the container width
    columnWidth: function (containerWidth) {
        return containerWidth / 5;
    }
});

CSS

.box {
    width:33%;
    margin:0%;
    padding:0%
}
.box img {
    width:100%;
    height:auto
}

何を調整する必要がありますか？

4

2 に答える 2

5

パーセンテージベースのレイアウトで Masonry を使用すると、同様の問題が発生しました。私にとっては、ブラウザのスクロールバーの問題でした。幅はスクロールバーなしで計算されました。Masonry が実行された後、スクロールバーが表示されたため、測定値がわずかにずれていました。次のCSSを追加することで問題を解決できました。

body { overflow-y:scroll; }

これにより、必要がない場合でもスクロールバーが強制され、計算が正確になり、ガターが修正されます。

うまくいけば、これは他の誰かに役立ちます。

于 2014-10-06T20:53:09.110 に答える
0

石積みのコードが何をしているかをもう少し詳しく見てみましょう。

列の幅を設定すると、関数はコンテナーの幅を取り、それを 5 で除算する数学結果を返します。ただし、CSS では、ボックスの幅は親の 3 番目です。そのため、石工は 3 番目の幅のボックスを 5 番目の幅の列に配置しようとしています。

これはおそらくここでの問題ですが、石積みや流動的なレイアウトは扱いにくい場合があるため、それだけではありません...

于 2012-06-18T11:03:59.607 に答える