jQuery 使列高度相同 - 字体/文本更改后

Question

我目前正在进行响应式设计，并且在三列中有一些内容框。我希望所有内容框的高度相同。因此，我进行了一些 Google 搜索并找到了几个 jQuery 解决方案。

我最终选择了类似这样的东西:

$(".equal-height").each(function() { 
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
});

$(".equal-height").height(maxHeight);

这很好用，除了一个问题。

当您调整窗口大小时，列会变得更宽/更窄，因此文本会自行重新分页。

JavaScript 似乎无法在窗口调整大小时计算重新分页文本的高度。

我发现了与窗口调整大小和文本问题类似的问题。

有人想出解决办法吗？

我无法相信具有等高列的响应式设计如此困难。

感谢任何想法!

标记

Answer 1

好吧，我终于弄清楚我需要什么了。

最终代码如下所示:

// Reset max height for each class
var intMaxHeight = 0;

// We MUST remove all heights from the various DIV elements
// NOTE: If we don't do this then the height will stay the same no matter what 
// after the first call - it will just stay the same as the first intMaxHeight
$(".content-box-content").each(function() {
    $(this).css("height", "");
}); 

// Set the max height of the tallest column
$(".content-box-content").each(function() {
    if (intMaxHeight < $(this).height()) {
        intMaxHeight = $(this).height();
    } else {
        intMaxHeight = intMaxHeight;
    }
});

// Set all columns to the height of the tallest column
$(".content-box-content").each(function() {
    $(this).css("height", intMaxHeight + "px");
}); 

关键是设置 $(this).css("height", ""); 行。

如果没有这个功能，它就会一遍又一遍地使用相同的高度，这让它看起来好像不起作用。

现在，当调整窗口大小时并且文本自行重新分页时，它会“连续”成功触发。