javascript - jQuery将div的高度设置为另一个的 'dynamic height'

我有两个股利。

  <div class="col-1"><p>Content</p></div>
  <div class="col-2"><img src="" alt="" /></div>

彼此尊重的内容。

我正在尝试将col-2的高度设置为与col-1的高度完全相同。

我尝试使用jQuery:

   $(document).ready(function() {
        var divHeight = $('.col1').height();
        $('.col2').css('min-height', divHeight+'px');
    });

问题是col-1上没有设置高度。它的动态高度随着内容的增加而增加。因此，上面的代码不适用于它。

有什么办法可以使用jQuery将col-2的最小高度设置为等于col 1的动态高度？

最佳答案

这对我来说很好，只是您的类名错误，类名应该为.col-1和.col-2:

$(document).ready(function() {
    var divHeight = $('.col-1').height();
    $('.col-2').css('min-height', divHeight+'px');
});

这是Fiddle

编辑-基于评论:
您无需使用jquery就可以完成所有这些操作

Flexbox(在IE 8和9中不受支持)-如果将flex应用于父级div，它将使其所有子级的高度相等:

 .row{ display: flex;}

表-您可以给div设置表的布局

.row {display: table; }

.row div { display: table-cell;}

关于javascript - jQuery将div的高度设置为另一个的 'dynamic height'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32109683/