.grid增加了不需要的高度

Question

我尝试了一切，并搜索了这个问题，但无法解决它。

看起来像.grid已经添加了一个额外的100px，这是不受欢迎的，并与我的布局混淆。我做错了什么？

所示的额外添加的高度

Link

1px border yellowbox：.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砌体是没有问题的......是你的编码可能会搞乱它向上。