css - 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 下方的空间未被使用并保持为空。如何解决问题？

Answer 1

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

Answer 2

你有几个选择。

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

2）您可以使用带有位置的div：相对；溢出：隐藏；对于每一行

3）您可以制作一个 clearfix 元素并将其添加到每一行之后。

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