私は3列の用語集ページを特徴とするWordpressプロジェクトに取り組んでいます。私はMasonryを使用して、すべてのエントリをうまく組み合わせるようにしています。これはほぼ機能していますが、完全ではありません。
問題のページは次のとおりです。http://ratherbrilliant.com/staging/starstruck/category/glossary/browse-A/
これは通常のWordpressの設定であり、コンテナーdivにネストされた多数の記事があることを意味します。
<div id="glossary-content">
<article class="post">article content</article>
<article class="post">article content</article>
<article>article content</article>
</div>
記事はパーセンテージ幅で浮かんでいます:
body.category-glossary article {
width: 26%;
padding: 0 3% 0 4%;
text-align: justify;
margin-bottom: 25px;
float: left;
}
デフォルトのMasonryセットアップのみを使用していますが、それを機能させるためにあらゆる種類のオプションを試しました。
$('body.category-glossary #glossary-content').masonry({
itemSelector : '.post',
});
ほぼ機能していますが、下にスクロールすると、最初のエントリとその下のエントリの間に大きなギャップが表示されます。私はこれを機能させることができません。どんな助けでも大歓迎です。
ありがとうございました!