如何强制所有<div>元素在页面中具有相同的高度？</div>

Question

以下图片是我的产品展示。我使用Bootstrap 3.2，整个页面位于<div class="col-xs-12">元素内，您可以在图片底部看到动态生成的HTML代码。

我的问题是product-container div没有相同的高度（请看高亮显示的照片）。

是否可以将所有高度固定为不影响响应性的高度？

Answer 1

几行jQuery可以解决这个问题：

var maxHeight = 0;

$(".box").each(function () {
    if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    }
});

$(".box").height(maxHeight);

（将.box替换为您想要均衡的div类。）

快速 jsfiddle 以显示其运作方式。

Answer 2

您可以使用flexbox align-items属性。这使得所有孩子都拥有他们最高的兄弟姐妹的高度。在JSFiddle上查看它。

#containter { /* replace with the parent of the product-container divs */
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

不幸的是，某些较旧的浏览器do not support flexbox或具有不同的语法。有关如何最大限度地提供支持，请参阅CSS-Tricks或Dev.Opera上的文章。

Answer 3

尝试创建一个名为＆＃34; container＆＃34;的类。具有固定的高度并将其应用于这些div。每个断点的高度数不同。