我有两个 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 的动态高度?
最佳答案
这对我来说很好,只是你的类名是错误的,类名应该是 .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;}
table - 你可以给你的 div 表格布局
.row {display: table; } .row div { display: table-cell;}
关于javascript - jQuery 将一个 div 的高度设置为另一个的 'dynamic height',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32109683/