高さが異なるli(div)を敷き詰める
サイトを作っていて、2カラムの高さがそれぞれ異なるliやdivタグを奇麗に並べたくなった。
普通にそのようなliを回り込みを使って、並べるとliタグが高さで同期を取ろう(?)としているような振る舞いをして、不自然な余白ができる。
ぐぐってもCSSでの解決策がヒットしなかったので、jsで余白を消すことにした。
今回使ったのは、敷き詰める系jQueryプラグインのManosy。
wookmarkとか他にも、要素を敷き詰める系はあるっぽい。
以下を実行すれば、余白がなくなった。
$(function(){ $('#main').masonry({ //ここには敷き詰めたい要素を囲うidなど指定します。 itemSelector : 'li.content' //ここに敷き詰めたい要素のclassを指定します。 }); });
簡単にできました。感謝。