Question

我想在所有项目上设置相同的高度。我目前正在使用这个例子：

   var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);

基于此问题Same height column bootstrap 3 row responsive

我想在每行的基础上应用它，因为某些高度设置得太高而不需要设置的行。

Answer 1

如果你在父div上使用display:flex那么它也可能用css，那么所有内部div在同一行中都会有相同的高度，但是如果它需要jquery则使用这个

<强> CODE

var maxHeight;
$(".well").each(function(){
  if($(this).height > maxHeight){
    maxHeight = $(this).height;// will assign the highest height to this
  }
})
$('.well').css('height',maxHeight );

根据最大尺寸div，所有div都具有相同的高度

Answer 2

例如，为了让我们假设你通过php循环输出你的html（如果没有，那么你可以简单地循环通过elems分配一个类）同样的原则适用。

PHP示例输出html

    <?php foreach($array as $k => $v): ?>
        <?php if($k % (4) == 0) $class++; ?>

        <div class="row-num-<?php echo $class ?>">
            // div content variable height
        </div>
    <?php endforeach; ?>

jQuery使用现有代码设置每行相等高度

        var totalFrames = $('div[class*=row-num-]').length;
        for ( var i = 1, l = totalFrames; i < l; i++ ) {
            var heights = $(".row-num-"+i).map(function() {
                    return $(this).height();
                }).get(),

                maxHeight = Math.max.apply(null, heights);

            $(".row-num-"+i).height(maxHeight);
        }

这假设您的行是4个elems宽。您可以根据您的使用情况设置或动态计算它。在jQuery中，我们使用类似row-num-的类遍历所有元素，然后我们将每个元素设置为设置高度。这些将每四个元素具有相同的类别。它一直持续到达到此类名的当前计数。

DEMO https://jsfiddle.net/DTcHh/18026/

每排平均高度

2 个答案: