使用jQuery Masonry时图像重叠

Question

我正在尝试使用jQuery Masonary插件创建一些图像的布局（以及一些文本）。

问题是底行的图像覆盖了顶行的图像。

jQuery(function ($) {
    $('#container').masonry({
        itemSelector: '.item',
        gutter: 10
    });
});

我也尝试过使用imageLoaded但不确定如何正确使用它（在小提琴中使用）。

元素的html布局如下。

<div id="container">
    <div class="item">
        <img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185/zkrTbOKUt7w7x8TkLvR2qXZAKd3.jpg">
        <p> <a href="http://localhost/movie/101299">The Hunger Games: Catching Fire</a></p>
    </div>

   <div class="item">...</div>
   <div class="item">...</div>
</div>

应用的CSS如下所示。

.item {
   width: 185px;
   height: 200px;
}

小提琴：http://jsfiddle.net/EVwXx/4/

Answer 1

您为.item设置了固定高度。删除它应该有所帮助：fiddle。