Javascript 将高度div设置为与其他div相同

Javascript 将高度div设置为与其他div相同,javascript,html,css,Javascript,Html,Css,关于这个话题,我已经看到了很多问题,但没有一个对我有用。显示器:flex;确实做到了这一点,但删除了div上的浮动。我也不想使用表格单元格 图像div的高度必须根据文本div的高度进行缩放。它现在看起来很好,但是当你调整它的大小或者添加更多的文本时,它会把div拉得不成比例 我不介意使用CSS或js <div class="content"> <div class="productcol"> <div class="productim

关于这个话题,我已经看到了很多问题,但没有一个对我有用。显示器:flex;确实做到了这一点,但删除了div上的浮动。我也不想使用表格单元格

图像div的高度必须根据文本div的高度进行缩放。它现在看起来很好,但是当你调整它的大小或者添加更多的文本时,它会把div拉得不成比例

我不介意使用CSS或js

    <div class="content">
    <div class="productcol">
        <div class="productimg right" style="background-image:url('https://static.pexels.com/photos/8704/pen-idea-bulb-paper.jpg'); background-size:cover; background-position:center center;"></div>
        <div class="producteentweede">
            <div class="producttext  left">
                 <h3>Title</h3>

                <p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.

Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            </div>
        </div>
    </div>
</div>



.content {
    width: 92%;
    max-width: 76em;
    padding: 0 4%;
    margin: auto;
}


.productcol{
    width:100%;
    margin-left:0;
    display:block;  
}

.producteen{
    width:100%;
    height:30em;
}

.producteentweede, .productimg{
    width:50%;
    position:relative;
    float:left;
    min-height:30em;
}

.producttext{
    padding-left:2em;
    padding-right:2em;
    margin-top:5em;
}

标题
梅塞纳斯·福西布斯·莫利斯·因特杜姆。这是一个很好的例子。Donec ullamcorper nulla non metus拍卖商fringilla。Lorem ipsum dolor sit amet,是一位杰出的献身者。这是一个很好的例子。猫门前庭舌骨。
Donec sed odio dui。莫利斯夫妇,最不常见的luctus夫妇,最不常见的ligula夫妇,最不常见的是lacinia-odio-sem-nec-elit夫妇。在自然社会中,因怀孕而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯。莫里·利奥·里索斯,圣殿之门,爱神之门的前庭

.内容{ 宽度:92%; 最大宽度:76em; 填充:0.4%; 保证金:自动; } .productcol{ 宽度:100%; 左边距:0; 显示:块; } producteen先生{ 宽度:100%; 高度:30公分; } .producteetweede、.productimg{ 宽度:50%; 位置:相对位置; 浮动:左; 最小高度:30em; } .producttext{ 左:2米; 右侧填充:2米; 边缘顶端:5em; }

这里有一种方法可以设置一个元素的高度对应于其他元素的高度

$(document).ready(function(){
    $('img').height($('.text-div').outerHeight());
});

没关系,我从一位友好的策划人那里得到了帮助,并且成功了

$(document).ready(function(){

$( window ).resize(function() {
    resizeToTextHeight();
});

$(function() {
    resizeToTextHeight();
});

function resizeToTextHeight(){
    $('.productcol').each(function(i, obj) {
        var height = $(this).find(".producteentweede").height();
        $(this).find(".productimg").css("min-height", height);
    });
}};

似乎对我不起作用:/I将其更改为:$(document.ready(function(){$('.producttextJS').height($('.productimgJS').outerHeight());});有一个错误-图像的高度应等于文本div,因此:$('.productimgJS').height($('.producttextJS').outerHeight();});您在控制台中是否也有任何错误?单击f12并转到控制台,查看红色错误。