div对齐并排高度问题[关闭]答案

【问题标题】：Div alignment side by side height issue [closed]div对齐并排高度问题[关闭]
【发布时间】：2013-04-22 09:23:29
【问题描述】：

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

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

这些 div 将浮动设置为左侧，因此它们根据可用的宽度并排对齐。因此可能有 2、3 或 4 个产品并排显示在一行中。

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

【问题讨论】：

【解决方案1】：

另一种解决方案（仅使用固定高度可能是最简单的）是使用 jQuery Masonry 之类的东西，最终结果如下所示：

【讨论】：

【解决方案2】：

你有几个选择。

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

2) 您可以使用带有 position: relative; 的 div溢出：隐藏； 每一行

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

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

【讨论】：