爲什麼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在砌體中消失？

回答

相關問題