Geek Answers Handbook

I use brickwork without giving it the proper height, so the tiles inside are inappropriate

I use masonry to display content, masonry.desandro.com, the problem is that it does not give the container the proper height, as if you knew that the masonry dynamically gives the container height and the marker style inside the objects, but it does not work properly . here is the js masonry.

$(function(){ $('#ItemContainer').masonry({ // options itemSelector : '.item' }); });

and this is my html skeleton

 <html><body> <div id="content"> <ul id="ItemContainer"> <li class="item">here li content with block style</li> ....more li's </ul> </div> </body></html>

but when I set the height for each li, then it works fine, but the image in it can have any height, so I need to maintain its height on the car. the second row of elements overlaps from the first to half the first, and the third for a second, etc .... each time it gives 426 pixels of height in the ItemContainer.

here I downloaded my code ... www.testingmycode.comuv.com/rough2.html ... please do a checkout. showing unwanted behavior, reloading the press, tiles are arranged in the same way as a card game in MS windows, and when you resize the windows they are positioned correctly ... click the browser reload button 2-3 times, resize the window to see them, make an order.

+4
source share
2 answers

I do not see your code, but you should use the imagesLoaded() method.

 var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.item', columnWidth : 240 }); });
+5
source

I think this is a problem with clearing divs.

Put this code in some places in your code and check ..

 <div style="clear:both"></div>

This usually happens if yu used a float somewhere and it will work correctly as soon as yu put it

0
source

More articles:


All Articles