4

我有一个所有向左浮动的 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>
4

2 回答 2

3

尝试

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);
})

演示：小提琴

于 2013-08-28T09:42:06.403 回答
0

好的试试这个：

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);
            }
        });
}
于 2013-08-28T09:56:12.790 回答