使用jQuery/CSS找到最高的所有元素

Question

可能重複的：
CSS - Equal Height Columns?

我有3個div的。

像這樣：

<div class="features"></div> 
<div class="features"></div> 
<div class="features"></div> 

他們將充滿文本。我不知道多少。事情是，他們都是平等的高度。

如何使用jQuery（或CSS）查找最高的DIV，並將其他兩個設置爲相同高度，從而創建3個相同高度的DIV。

這可能嗎？

Answer 1

您不容易通過高度選擇或比較CSS，但jQuery和一些迭代應該很容易處理這個問題。我們將通過每一個元素循環，並再次跟蹤最高的元素，然後我們將循環，並設置每個元素的高度是最高的（工作JSFiddle）的：

$(document).ready(function() { 
    var maxHeight = -1; 

    $('.features').each(function() { 
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); 
    }); 

    $('.features').each(function() { 
    $(this).height(maxHeight); 
    }); 
}); 

[附錄]

Sheriffderek製作了a JSFiddle for this solution in a responsive grid。謝謝！

[第2版]

下面是使用功能的編程的清潔器版本：

$(document).ready(function() { 
    // Get an array of all element heights 
    var elementHeights = $('.features').map(function() { 
    return $(this).height(); 
    }).get(); 

    // Math.max takes a variable number of arguments 
    // `apply` is equivalent to passing each height as an argument 
    var maxHeight = Math.max.apply(null, elementHeights); 

    // Set each height to the max height 
    $('.features').height(maxHeight); 
}); 

[版本3 - SANS的jQuery]

這裏有一個更新的版本沒有按」 t使用jQuery（工作JSFiddle）：

var elements = document.getElementsByClassName('features'); 

var elementHeights = Array.prototype.map.call(elements, function(el) { 
    return el.clientHeight; 
}); 

var maxHeight = Math.max.apply(null, elementHeights); 

Array.prototype.forEach.call(elements, function(el) { 
    el.style.height = maxHeight + "px"; 
}); 

（and here it is in ES6）

Answer 2

你可以做三個格，但你得加來包裹它像這樣

<div id="wrapper"> 
<div class="features"></div> 
<div class="features"></div> 
<div class="features"></div> 
</div> 

在head標籤放的這個

<style type="text/css"> 
#wrapper { 
    position:relative; 
    overflow:hidden; 
} 

.features { 
    position:absolute; 
    float:left; 
    width:200px; /* set to whatever you want */ 
    height:100%; 
} 
</style> 

任何一個框寬度是，其他人也會得到相同的。希望這可以幫助。如果沒有，我很抱歉，我只是當場做了代碼。

Answer 3

你可以使用jQuery每個功能：

var highest; 
var first = 1; 
$('.features').each(function() { 
    if(first == 1) 
    { 
     highest = $(this); 
     first = 0; 
    } 
    else 
    { 
     if(highest.height() < $(this).height()) 
     { 
       highest = $(this); 
     } 
    } 
    });