4

私は素晴らしいjquery石積みプラグインを使用しようとしています-> http://desandro.com/resources/jquery-masonry/

プラグインは問題なく動作しますが、nth-child（）セレクターを使用して3つおきの要素のマージンを削除するレイアウトの作成に問題があります。

#footerwidgets li.widget {
    margin: 0px 24px 24px 0px;
    width:340px;
}

#footerwidgets li.widget:nth-child(3n) {
  margin-right:0px;
}

このウィジェットのコンテナの幅は正確に1068ピクセルなので、3つのウィジェットが完全に収まります（最後のウィジェットには右マージンがないため）。

jquery masonryプラグインを使用しようとすると、この動作は無視されます。2つの列だけが収まります（プラグインが機能するため、すべてのウィジェットが石積みスタイルでフロートされます）。要素を調べると、3つおきの要素にも24pxの右マージンがあります。したがって、n番目の子は無視されます。

それを機能させる方法はありますか？

4

2 に答える 2

10

jQueryを使用して、余白を削除し、代わりにMasonryのgutterWidthオプションを使用します。

CSS：

#footerwidgets li.widget.masonry-brick { margin: 0; }

jQuery：

$('#footerwidgets').masonry({
  gutterWidth: 24
});
于 2011-12-03T03:28:17.257 に答える
1

石積みは、可変サイズのマージンではうまく機能しません。3つの列と528pxのコンテナがあります。あなたの最善の策は176pxの3つの列で行くことです。各列のマージンは、たとえば12px、幅は152pxになります。

合計幅から左右の余白を引いた値を528pxにする場合は、コンテナを544px（528px + 2 x 12px）に拡張し、列の幅を160に拡張します。

于 2011-03-08T21:35:11.433 に答える