为什么inline-block导致div在砌体中消失？

我在这里使用此页面上的砖石isFitWidth方法：http://www.noidea.co.nz/products 为什么inline-block导致div在砌体中消失？

基本上当我添加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 
    }); 

});

干杯

来源

2015-11-26 Callum Greig

你把它放在哪里？在.grid中？（努力重新创造） –

更重要的是，你想达到什么目的？查看CodePen和网站，CodePen使用Divs作为子容器，而您的网站使用UL/LI元素。不同的html元素可能会有不同的表现。 –

将display：inline-block设置为您的网格容器时，它会丢失默认宽度：100％的display：block;发生这种情况是因为网格项目具有绝对位置，因此将从标准流程中移除。如果要使用显示：内联块必须设置宽度：100％或另一所希望的固定宽度一样宽：980px这样的：

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

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

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

来源

2015-11-26 12:57:27

为什么inline-block导致div在砌体中消失？

回答

相关问题