jquery masonry：nth-child（）は機能しませんか？

ちょっと男が、私は素晴らしいjqueryの石工プラグインを使用しようとしている - >http://desandro.com/resources/jquery-masonry/jquery masonry：nth-child（）は機能しませんか？

プラグインが正常に動作しますが、しかし、私は取り除くためにn番目の子（）セレクタを使用してレイアウトを作成する問題を抱えています3番目の要素ごとにマージンの権利があります。

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

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

このウィジェットのための私のコンテナが正確1068px広い3つのウィジェットなので（最後のウィジェットは何の右マージンを持っていないので）私は、この動作は無視されますプラグインjqueryの石材を使用しようとすると、完全

に収まります！ 2つの列だけが入ります（プラグインが機能するので、すべてのウィジェットは石積みスタイルで浮かれます）。3番目の要素がすべて24pxの右マージンを持っているか調べます。したがって、nth-childは無視されます。

これを行うにはどうすればよいですか？

出典

2011-03-08 matt

何ブラウザ、あなたがこの中でテストしたのですか？ 'nth-child'セレクタはCSS 3なので、まだサポートは少し限られています。 Internet Explorerはバージョン9までサポートしていません。 – Guffa

クロムやサファリを使用しています – matt

にjQueryを使って、余白を削除し、代わりにMasonry's gutterWidth optionを使用してください。

CSS：

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

のjQuery：

$('#footerwidgets').masonry({ 
    gutterWidth: 24 
});

出典

2011-12-03 03:28:17 desandro

可変サイズのマージンでは、Masonryはうまく機能しません。 3つの列と528ピクセルのコンテナがあります。あなたの最良の賭けは、176pxの3つの列に行くことです。各列の余白は、たとえば12ピクセル、幅は152ピクセルです。

あなたは528pxであるためにあなたの全体の幅のマイナス左右の余白をしたい場合は、544pxにコンテナを展開（528px + 2×12ピクセル）とあなたのカラムの幅160

出典

2011-03-08 21:35:11 Dimitry

sry、そのカンマは問題ではなく、この質問を投稿するときに起こったちょっとした間違いです...問題は私です3つのウィジェットを#wrapper div（水平幅1068ピクセル）に水平に合わせたいすべてのウィジェットは幅340ピクセルで、余白は24ピクセルです。すべての3番目のウィジェットの右余白は0に設定されています。それは340 + 24 + 340 + 24 + 340 = 1068を意味します。これは、私が石工を使用しないときにうまく動作します。しかし、私が石積みを使うとき、すべてのウィジェットは24pxの右マージンを持っているので、3番目の要素はすべて左に浮かんでいます - >ウィジェットの2つの列だけが私のラッパーに収まります。 – matt

はい、あなたは私を正しく理解していました。私の3番目のウィジェットは左に浮かんでいます。しかし、私はそれを他の2つのウィジェットのほかにトップへ浮かせたいと思います。 – matt

HTMLへのリンクを投稿すると、あなたの質問にうまく答えるのに役立ちます。 pastebinのようなものを使用してください – Dimitry

jquery masonry：nth-​​child（）は機能しませんか？

答えて

関連する問題

jquery masonry：nth-child（）は機能しませんか？