Question

我已经看到很多关于这个话题的问题，但没有一个对我有用。显示：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;
}

https://jsfiddle.net/m6s0xhw6/5/

Answer 1

这是一种设置一个元素高度对应于其他高度的方法。

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

Answer 2

没关系，我已经得到了一位友善策划者的帮助并让它发挥作用了！

$(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);
    });
}};

设置高度div与其他div相同

2 个答案: