我的电子商店(http://shop.rukahore.sk/)上有一个产品网格。每个产品div均为222px x 222px,但我希望它具有自动高度。

我尝试过这样的事情-http://patterntap.com/code/stacking-columns-layout-masonry
但是我必须添加min-height,但效果不好,因为某些图像更小或更大,并且包裹div仍为222px,由于悬浮效果等,我不想发生这种情况。

有人可以提供建议吗?

最佳答案

好吧,要使用该页面上显示的显示,您需要使用插件

<!-- 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;">


在脚本中添加初始化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 {
    }

10-08 19:29