html - 如何强制所有 元素在页面中具有相同的高度？

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 展示它是如何工作的。