Div对齐并排高度问题

Question

我使用以下方式在div中布置产品图片：

<div>
        <img src="imgs/1.jpg" />
        <h3>Flowers Bunch</h3>
        <span>Rs 500</span>
</div>

这些div的浮动设置为左侧，因此它们根据可用的宽度并排排列。因此可能会有2个，3个或4个产品连续并排显示。

问题是，如果div中的一个div占据同一行中的其他div的高度，那么在下一行中，div的高度扩展的空间未被使用并保持为空。如何解决这个问题？

Answer 1

另一个解决方案（仅使用固定高度可能是最简单的）是使用像jQuery Masonry这样的东西，最终结果看起来像这样：

Answer 2

您有几个选择。

1）如果您确定它们不会高于该值，您可以为元素设置最小高度。

2）你可以使用位置的div：relative;溢出：隐藏; 为每一行

3）你可以制作一个clearfix元素并在每一行之后添加它。

.clearfix { clear: both; font-size: 0; line-height: 0; text-indent: 9999; }