小编Rav*_*ana的帖子

我在包含下面列出的修改后的列表项的父元素（一个无序列表）上激活了 Masonry（Chrome 的 F12 DEV 工具以粉红色显示 margin-bottom 和 margin-right）：

加载文档时，尽管每个列表项的 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 样式就会生效，如下所示；

关于如何在页面加载时实现上述目标的任何想法？

更新*

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