jquery - 响应式等高 div

Question

我有四个并排的 div，其中包含大致相同数量的文本，但有些浏览器呈现文本略有不同，以使某些 div 比其他 div 更高/更短。

我知道有 jQuery 插件可以让您将多个 div 设置为与最高的高度相同的高度，但是我的网站是响应式的，并且 div 的高度会随着响应式网站的平板电脑和移动“版本”而变化。

有没有办法设置这四个 div 让它们都是最高的高度，并且随着浏览器调整大小以触发布局切换到平板电脑或移动版本，div 将能够相应地调整它们的大小，并再次使所有的高度都与最高的 div 相等？

Answer 1

function resizeMy4Div(){
    var maxHeight = 0;
    $my4div.css("height","auto").each(function()
    {   var h = $(this).height();
        if(h > maxHeight) maxHeight = h;
    }).height(maxHeight);
}

$(window).on("resize",resizeMy4Div);
resizeMy4Div();

Answer 2

好的，这是第二种解决方案，但假设更大的 div 总是相同的:-)

var biggerDiv = $();
var maxHeight = 0;

$my4div.each(function()
{   var $t = $(this);
    var h = $t.height();
    if(h > maxHeight)
    {   maxHeight = h;
        $biggerDiv = $t;
    }
}).not($biggerDiv).height(maxHeight);

$(window).on("resize",function()
{   $my4div.not($biggerDiv).height($biggerDiv.height());
});