我的电子商店(http://shop.rukahore.sk/)有一个产品网格。每个产品div为222px x 222px,但我希望它具有自动高度。
我试过这样的事情 - http://patterntap.com/code/stacking-columns-layout-masonry, 但我不得不添加最小高度并且它看起来不太好,因为有些图像更小或更大,包裹div仍然是222px,我不希望由于悬停效果等而发生。
有人可以就此提供建议吗?
答案 0 :(得分:0)
好吧,要使用该页面中显示的显示,您需要使用插件
<!-- Requires Masonry | visit http://masonry.desandro.com/ to download -->
如果您不想添加更多插件......那么,让您失去高度的原因是float css属性。您应该使用其他东西制作网格,例如在www.camarasdecolores.com中查看它们是如何做到的。
添加Masonry插件:
为您的容器添加ID:
<div id="masonryContainer" class="hp-products allposts" style="position: relative; height: 2008px;">
在脚本中添加init js代码
$(window).load(function(){
$('#masonryContainer').masonry({
itemSelector: '.hp-product',
columnWidth: 60
});
});
更改一些css:
#masonryContainer { width: 0 auto; }
.hp-product {
width: 180px; float: left;
}
.hp-product-img {
}
.hp-product-img img {
max-width: 100%;
height: auto;
}
//Void the following ones
.hp-products {
}
.allposts {
}
.allposts .hp-product {
}