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

Posted 2023-03-06

【中文标题】div对齐并排高度问题[关闭]

【英文标题】：Div alignment side by side height issue [closed]

【发布时间】：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;