Question

我有四个并排的div包含大约相同数量的文本，但是有些浏览器会略微不同地渲染文本，以使某些div比其他div更高/更短。

我知道有一些jQuery插件可以让你设置一些div与最高的div相同，但我的网站是响应式的，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());
});

响应相等的高度divs

2 个答案: