设置高度div与其他div相同

我看过很多关于此主题的问题，但没有一个适合我。显示：flex;做的伎俩，但消除浮动div。我也不想使用表格单元格。设置高度div与其他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/

来源

2015-10-21 tehchriis

没关系，我已经从一个友好的主谋帮助，得到它的工作！

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

来源

2015-10-21 12:55:54 tehchriis

看起来不错，但不是主人。 ;-) – Shikkediel

这里是用于设置对应于其他高度一个元件高度的方法。

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

来源

2015-10-21 12:40:51

似乎并没有为我工作：/我改成了这样： $（文件）。就绪（函数（）{ $（” producttextJS。 '）的高度（$（' productimgJS。 '）.outerHeight（））; }）; – tehchriis

有一个错误 - 图像的高度应该等于文本格：$（'。productimgJS'）。height（$（'。producttextJS'）。outerHeight（））; }）;你也有在控制台中的任何错误？点击f12并转到控制台并查看红色错误。 –

设置高度div与其他div相同

回答

相关问题