自动高度网格答案

【问题标题】：Auto height grid自动高度网格
【发布时间】：2013-07-26 06:46:19
【问题描述】：

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

我尝试过这样的事情 - http://patterntap.com/code/stacking-columns-layout-masonry ，但是我不得不添加 min-height 并且它看起来不太好，因为一些图像更小或更大并且包装 div 仍然是 222px，由于悬停效果等我不想发生这种情况。

有人可以就此提供建议吗？

【问题讨论】：

而不是 div 为什么你不能为图像使用特定的宽度和高度..
你是什么意思，阿伦？

标签： javascript css grid jquery-masonry

【解决方案1】：

好吧，要使用该页面中显示的显示，您需要使用插件

<!-- Requires Masonry | visit http://masonry.desandro.com/ to download -->

如果你不想添加更多插件...好吧，让你失去高度的是浮动 css 属性。您应该使用其他东西来制作网格，例如在 www.camarasdecolores.com 中查看他们是如何做到的。

添加砌体插件：

为你的容器添加一个 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 {
    }

【讨论】：

是的，但是 Masonry 插件并不能解决我的问题，即最小高度用于包装 div。如果我删除此属性，所有图像都会折叠。
嗨罗伯特。尽其所能。也许您之前尝试过没有使用有关大小的信息删除您的 css。由于这些插件用于在页面加载时计算位置，因此这个 css 会影响它们
只是为了确定 - 我提到了每个产品的包装 div 的最小高度，而不是整个页面或产品的包装 div。谢谢你的代码，我试试看！ :-)
是的，如果看看我现在发布的代码 .hp-product 只有宽度和浮动。不是高度或最小高度。