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

Question

以下图片是我的产品展示.我使用Bootstrap 3.2并且整个页面都在一个<div class="col-xs-12">元素中,您可以在图像的底部看到动态生成的html代码.

我的问题是product-containerdiv没有相同的高度(查看突出显示的照片).

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

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;
}

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