.grid 增加不需要的高度

Question

我尝试了所有方法并搜索了这个问题，但就是无法解决。

似乎 .grid 添加了一个额外的 100px，这是不希望的并且弄乱了我的布局。我做错了什么？

显示额外增加的高度

1px border 黄框：.grid

1px border 绿框：.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

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

我添加的全部是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 不是问题...是您的编码可能搞砸了。

.grid 增加不需要的高度

.grid adds unwanted height

html

css

jquery-masonry