砌体项目边际底部问题

Question

我已经在父元素（无序列表）上激活了Masonry，其中包含下面列出的修改后的列表项目（使用Chrome的F12 DEV工具显示粉红色的边距底部和边距 - ish color）：

加载文档时，尽管每个列表项的CSS如下所示，但仍会出现上述情况;

li {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    float: left;
    padding: 20px;
    position: relative;
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
}

我使用的jQuery如下;

$(document).ready(function(){
    $("ul").masonry({
        itemSelector: 'li'
    });
});

然而，一旦窗口在地平线上调整大小，CSS样式就会生效，如下所示;

有关如何在页面加载时实现上述内容的任何想法吗？

UPDATE *

JSFiddle：Click here。如果上述问题没有出现，请点击“运行”按钮。按钮（Ctrl + Return）。

Answer 1

对于webkit浏览器问题，我只是在$(window).load(function(){之前添加了('#masonry').masonry({。现在每个浏览器上的每个项目的保证金底部都很好。

Answer 2

当我添加gutter: 10;

时，它的工作方式正常

$("ul#news").masonry({
    itemSelector: 'li',
    gutter: 10
});

Explenation：http://masonry.desandro.com/options.html#gutter

Answer 3

到目前为止，我遇到了同样的问题。

我已经完全删除了所有边距并且让砌筑处理它（＆＃34; gutter＆＃34; -option）并且它工作正常！

希望有所帮助！