跨多行设置 3 个元素的高度，取最大值答案

【问题标题】：Set height of 3 elements, taking largest value, across multiple rows跨多行设置 3 个元素的高度，取最大值
【发布时间】：2013-08-28 09:10:40
【问题描述】：

我有一个所有向左浮动的 div 布局，列数为 3。这些图层内部是长度不同的文本，因此这些图层的高度不同，因此无法正确对齐，而且看起来也不是很好边框的高度不匹配。

我可以为所有 div 设置一个固定高度，但这会在某些行上留下巨大的空白，所以我编写了一些 JQuery 来获取所有 div 的最大值并将所有高度设置为该高度，以便它们对齐正确。脚本是：

var sectionheight = new Array(); //set empty array
$(".section-title").each(function () { //get all div elements
    var value = $(this).height(); //get div height
    sectionheight.push(value); //write height to array
});
var newsectionheight = Math.max.apply(Math, sectionheight); //get largest value in array
$('.section-title').height(newsectionheight); //set height of all elements to largest

这很好用，但在设计中，有些行只有 1 行文本，因此它正在将该行调整为与 5 行文本的顶行一样大。

我想要实现的是让前 3 个 div 获取最大值，然后将这 3 个 div 高度设置为该值。然后对第 4 到第 6 个 div 重复此操作，依此类推（因为 div 在 3 列中）

我可以用$(".section-title").eq(2) 做一个非常冗长的解决方案，但我可以想象这不是一个理想的方法。

感谢任何建议

编辑一些div的示例（css在html中不可见，仅用于示例）：

<div style="width: 100%;">
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text and a longer title than the other rows</div>
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div>
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text not as long</div>
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div>
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">short text</div>
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div>
</div>

【问题讨论】：

也提供您的标记

标签： javascript jquery

【解决方案1】：

试试

var $sections = $('.section-title');

$sections.filter(':nth-child(3n-2)').each(function () {
    var $this = $(this),
        $els = $this.nextAll(':lt(2)').addBack();

    var sectionheight = new Array();
    $els.each(function () {
        var value = $(this).height();
        sectionheight.push(value);
    });
    var newsectionheight = Math.max.apply(Math, sectionheight);
    $els.height(newsectionheight);
})

演示：Fiddle

【讨论】：

【解决方案2】：

好的，试试这个：

function setHeight(){
        var max =  -1;
            // this will give you maximum height of your div
        $(document).find('.test-div').each(function() {
            var h = $(this).height();
            max = h > max ? h : max;
        });
            // varible-div is the division whose height keeps changeing
        $(document).find('.variable-div').each(function(){
            var presentHeight=$(this).parents('.test-div').height(),
            difference=max-presentHeight;
            if(difference > 0){
                $(this).height($(this).height()+difference);
            }
        });
}

【讨论】：