Question

我这里有一个jsfiddle - https://jsfiddle.net/mx3sqksn/1/

我有两个元素（这里是p标签）

他们有不同的高度，但我不知道会有什么样的高度。

我需要两个元素都和两个中最高的一样高。

我还需要它具有响应性，所以当窗口较小且元素较高时，两者都保持相同的高度。

我知道还有其他方法可以像display：table;但我不能在实际的代码中这样做。

        var fluid_box = function() {
          var highest = 0;
          var hi = 0;
          $(".text").each(function(){
            var h = $(this).height();
            if(h > hi){
               hi = h;
               highest = $(this).height(); 
            }

            $(".text").css('height', highest);

          });

        }

         // Fire on DOM ready
        fluid_box();

        // Fire upon resize
        $atj(window).resize(fluid_box);

Answer 1

如果你想要调整大小，你需要清除添加的内联高度样式，然后检查最高。

您可以通过将样式设置为空字符串来清除样式。例如$(".text").css('height', '')将完全删除内联height=""。然后高度将是内容的高度，直到再次将其设置为内联。

JSFiddle：https://jsfiddle.net/mx3sqksn/6/

var fluid_box = function () {
    var highest = 0;
    var hi = 0;
    $(".text").css('height', '').each(function () {
        var h = $(this).height();
        if (h > hi) {
            hi = h;
            highest = $(this).height();
        }

    });
    $('#output').html(highest);
    $(".text").css('height', highest);
}

// Fire on DOM ready
fluid_box();

// Fire upon resize
$(window).resize(fluid_box);

注意：您的JSFiddle没有触发resize事件，因此将其更改为$(window).resize(fluid_box);。

Answer 2

$(".text").css('height', highest);在循环外调用它，两个div的高度都相等。

Jquery使元素更高，就像调整大小

2 个答案: