我在此页面上使用 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 设置为您的网格容器时,它会失去默认宽度: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;
}
关于jquery - 为什么 inline-block 会导致 div 与 Masonry 一起消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33937065/