html - 由于高度不同，多个 div 之间存在一些随机空白区域。如何在不使用强制高度的情况下摆脱它们？

Question

有一个similar thread关于我的问题及其解决方案是强制高度。但是，这会导致主题的响应性出现问题。让我解释。

我将 Prestashop 与 this theme 结合使用.如您所见，演示中使用的图像非常高 (395 x 468px)。我的产品图片没有那么高(它们大约为 355 x 240px)，这导致它们之间出现随机空白空间的问题。我对原始文件做了一些修改，目前看起来像下面这样:

现在，我可以通过在 <div class="product-container"> 上强制设置 400 像素的高度来实现临时修复。里面<li class="ajax_block_product> :

ul.product_list.grid > li .product-container {
    position: relative;
    height: 400px;
}

但是，这不是很有效，因为它在主题的响应能力方面造成了一些问题。在平板电脑/手机/其他屏幕 View 中，400 像素的高度要么不够，要么太多。当高度不够时，容器内的元素会溢出，而当它太多时，div 之间会出现巨大的间隙(高度方面)。

为此，我通过添加 @media 进行了另一个草率的修复。 product-container 的规则并添加了不同的高度，例如 300px、380px 和 420px。我觉得这不是很实用，而且我还没有看到更好的解决方案。任何建议表示赞赏!

Answer 1

一个快速简单的解决方案是使用带包装的 flexbox(在容器上)，例如

ul.product_list.grid {
  display: flex;
  flex-wrap: wrap;
}