初めてmasonryを使用しようと苦戦しています。
<ul>=親要素 <li>=子要素でfloat指定してます。masonryを設定する前は、<li>要素は問題なく横並びで表示されているのですが、masonryを設定するとカラム落ちしてしまいます。
<li>のwidthを12px小さくするとカラム落ちせず、横並びになります。masonryを使うと横幅が変わるなんてことがあるのでしょうか?
masonryのバグ対策で色々調べてみて、imagesloaded.jsも試してみましたが、直りませんでした。
記述方法に問題があるのでしょうか?
どなたかご教授お願いします。
html
1<script> 2$(window).load(function(){ 3$('.listbox').masonry({ 4 itemSelector: '.item', 5 isFitWidth: true, 6 isAnimated: true 7}); 8}); 9</script> 10 11 <ul class="itembox"> 12 <li class="item"></li> 13 <li class="item"></li> 14 <li class="item"></li> 15 <li class="item"></li> 16 <li class="item"></li> 17 </ul>
css
1 ul.itembox{ 2 width:1004px; 3 overflow: hidden; 4margin-left:-24px; 5} 6 ul.itembox li { 7 width:478px; 8 float:left; 9 margin: 0 0 10px 24px; 10 border:1px solid #000; 11 box-sizing: border-box; 12 padding:20px; 13}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/15 11:04