在每个三个div元素之间设置最大高度,并将其设置为rest div

时间:2019-06-30 11:30:40

标签: javascript jquery

我有10个浮动元素。在浏览器中,3 divs将排成一行。我想获取每3个div的最大高度,并为该行中存在的所有div设置它。

任何人都可以帮忙。

addedstring_firstfile.pdf
addedstring_anotherfile.pdf
addedstring_documentthree.pdf
(function(){
var x = document.getElementsByClassName("temp");
var ht = [];

for(i = 0; i < x.length; i++){
console.log("test :: ", x[i].clientHeight);
ht.push(x[i].clientHeight);
}
console.log("max :: ", Math.max.apply(null, ht));
var maximumht = Math.max.apply(null, ht);
$('div.temp').height(maximumht);
}())
.temp {
  border: 1px solid black;
  padding: 10px;
  width: 25%;
  float: left;
  margin: 10px;
}

1 个答案:

答案 0 :(得分:0)

为此,我制作了一个新的jsFiddle:https://jsfiddle.net/Julesezaar/bcgqz6x5/

var calculateHeights = function() {
    // reset heights before listing them again
    $('.tempwrap div.temp').height('');

    $(".tempwrap").each(function() {
        calculateHeightsInWrapper(this);
    });
};

var calculateHeightsInWrapper = function(wrapper) {
    var ht = [];
    $(wrapper).find(".temp").each(function() {
        ht.push(this.clientHeight);
    });
    var maximumht = Math.max.apply(null, ht);
    $(wrapper).find('div.temp').height(maximumht);
};

$(function() {
    // trigger one time on pageload
    calculateHeights();

    // trigger while window is resizing
    window.onresize = function(event) {
        calculateHeights();
    };
});