Question

.content-block类内容动态文本，因此每个块的高度不同。在窗口调整大小时，是否有任何方法可以获得.content-block的最大高度并应用于所有其他.content-block？

.content-block{
    height: 72px;
    display: block;
}

<div class="content-block">
    <span><img src='a.png'/></span>
    <span>
        <B>Lorem Ipsum</b>
        when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </span>

    <span><img src='b.png'/></span>
    <span>  
        <b>Lorem Ipsum</b>
        is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
    </span>
</div>

Answer 1

您可以遍历所有.content-block元素，检查当前.content-block的高度是否高于已找到的最高高度。如果是这样，请覆盖它，最后将所有.content-block元素的高度设置为iMaxHeight。

可以使用以下内容来完成：

$(document).ready(function() { 
  var iMaxHeight = 0;
  $('.content-block').each(function() { 
    if($(this).css('height') > iMaxHeight) { 
      iMaxHeight = $(this).css('height');
    }
  }
  $('.content-block').css('height', iMaxHeight);
}

Answer 2

有几种方法可以做到这一点。

在jsfiddle

上查看此示例

function getMaxHeight(){
    return maxHeight = Math.max.apply(null, $(".content-block").map(function (){
        return $(this).height();
    }).get());
}

$(window).resize(function(){
    $('.content-block').css('height', 'auto');
    $('.content-block').css('height', getMaxHeight);
});

$('.content-block').css('height', getMaxHeight);

Answer 3

在这里检查你的答案。我添加了另一个div来向您展示演示，并为div添加了背景。

http://jsfiddle.net/Lxtn4

HTML：

<div class="content-block" id="getmax"> <span><img src='a.png'/></span>
 <span><B>Lorem Ipsum</b>when an unknown printer took a galley of  type and scrambled it to make a type specimen book</span>
 <span><img src='b.png'/></span>
 <span>  
  <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.    
  Lorem Ipsum has
  </span>

</div>
<br>
<div class="content-block">My div</div>

CSS：

.content-block {
    height: 72px;
    display: block;
    background:blue;
}

JS：

$(window).resize(function () {
    var x = $("#getmax").height();
    $(".content-block").css("height", x);
});

在窗口调整大小更改div高度

3 个答案: