jquery - 为什么内联障碍会导致div与石工一起消失？

我在此处使用此页面上的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
    });

});

干杯

最佳答案

将display：inline-block设置到网格容器时，它将失去默认宽度：display：block;的默认宽度为100％；发生这种情况是因为网格项的位置是：absolute，因此已从标准流中删除。如果要使用display：inline-block，则必须设置宽度：100％或其他所需的固定宽度，例如宽度：980px，如下所示：

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

或者，您可以删除overflow：hidden，但是我不知道这将如何影响插件的行为。

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

关于jquery - 为什么内联障碍会导致div与石工一起消失？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33937065/