jquery - 为什么 inline-block 会导致 div 与 Masonry 一起消失？

Question

我在此页面上使用 Masonry isFitWidth 方法:http://www.noidea.co.nz/products

基本上，当我将 display: inline-block; 添加到包含所有产品的 div 时，它会导致 div 消失。这真的很令人困惑，因为我在这里尝试使用此方法:http://codepen.io/anon/pen/JYQNgv .

或者这段代码:

HTML

<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
}
/* ---- grid ---- */

.grid {
    background: #EEE;
   /* center */

   margin: 0 auto;
}
/* clearfix */

.grid:after {
    content: '';
    display: block;
    clear: both;
}
/* ---- grid-item ---- */

.grid-item {
    width: 180px;
    height: 120px;
    float: left;
    background: #D26;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
}  

.grid-item--height2 {
    height: 200px;
}

.grid-item--height3 {
    height: 260px;
}

</div>

JQUERY

// external js: masonry.pkgd.js

$(document).ready( function() {

    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 180,
        isFitWidth: true
    });

});

干杯

Answer 1

当您将 display: inline-block 设置为您的网格容器时，它会失去默认宽度:100% 的 display: block；发生这种情况是因为网格项具有 position: absolute 并因此从标准流程中删除。如果你想使用 display: inline-block 你必须设置 width: 100% 或其他想要的固定宽度比如 width: 980px 像这样:

.products_list {
  display: inline-block;
  width: 100%;
}

或者，您可以删除溢出:隐藏，但我不知道这将如何影响插件的行为。

.products_list {
  display: inline-block;
  overflow: visible;
}