jQuery将div的高度设置为另一个的"动态高度"

Question

我有两个div.

  <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的动态高度？

Answer 1

这对我来说很好,只是你的类名错了,类名应该.col-1和.col-2:

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

这是小提琴

编辑 - 基于评论:
您可以在不使用jquery的情况下完成所有这些操作

1. Flexbox (IE 8和9不支持) - 如果将flex应用于父div,它将使其所有子高度相等:

    .row{ display: flex;}  
   

2. table - 你可以给你的div表格布局

   .row {display: table; }
   
   .row div { display: table-cell;}