.grid会增加不需要的高度

Question

我尝试了所有内容并搜索了这个问题，但无法解决它。

似乎.grid已经添加了额外的100px，这是不受欢迎的，并且与我的布局相混淆。我做错了什么？

显示额外增加的高度 contextDestroyed

1px border yellowbox：.grid

1px border greenbox：.grid-item

CSS：

.grid {
    border: 1px solid yellow;
    width: 540px;
}
.grid-item {
    float: left;
    width: 246px;
    margin-bottom: 20px;
    border-top: 1px solid #bababa;
    padding-top: 30px;
    border: 1px solid green;
}

JS

 $(document).ready( function() {

      $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 250,
        gutter: 35
      });

});

Answer 1

首先尝试在每个浏览器上测试此代码。 - ＆GT;＆GT;＆GT;＆GT; http://jsfiddle.net/r6w1j70c/2/

所有ive添加的是Jquery

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

如果它适用于您的所有浏览器，那么这意味着JS Masonry不是问题......您的编码可能会弄乱它。