Question

我在这个网页上使用了Mason的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％：block;发生这种情况是因为网格项具有位置：绝对，因此从标准流中移除。如果你想使用display：inline-block，你必须设置宽度：100％或其他所需的固定宽度，如宽度：980px，如下所示：

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

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

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

为什么内联块会导致div与Masonry一起消失？

1 个答案: