.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砌體是沒有問題的......是你的編碼可能會搞亂它向上。