How to set image height to other part of div with same class names

Question

I have these 3 container divs and inside it textdiv is floated left and image div is floated right. I want to set the height of the image as per the height of the text. Is there anyway to do this using jQuery? Or should I give different class names to each div and set the height?

<div class='containerr'>
  <div class='textdiv'></div>
  <div class='imagediv'></div>
</div>    
<div class='containerr'>
    <div class='textdiv'></div>
     <div class='imagediv'></div>
</div>     
<div class='containerr'>
    <div class='textdiv'></div>
    <div class='imagediv'></div>
</div>

Answer 1

尝试使用此代码段

$('.containerr').each(function(){
$this = $(this); var textHeight = $this.find(".textdiv"); var imageHeight = textHeight.height(); $(".imagediv").css("height", imageHeight); });

Answer 2

CSS3 Flexbox can help with difficult layout challenges that were once difficult or impossible with floats alone:

.container {
    display: flex;
    flex-wrap: wrap;
}

.textdiv, .imagediv {
    display: flex;
}

Answer 3

HTML

  <div class="containerr">
<div class="textdiv"><p>Smapmle text.</p></div>
    <div class="imagediv"></div>
</div>
<div class="containerr">
    <div class="textdiv"><p>Smapmle text.</p><p>Smapmle text.</p></div>
    <div class="imagediv"></div>
</div>
<div class="containerr">
    <div class="textdiv"><p>Smapmle text.</p></div>
    <div class="imagediv"></div>
</div>

CSS

.containerr {
  display:block;
  width:100%;
  border: 1px solid black; 
  position: relative;
}

.textdiv {
  display: inline-block;
  width: 50%;
  border-right: 1px solid blue;
}

.imagediv {
  position: absolute;
  display:block;
  right:0;
  top:0;
  width: 50%;
  height: 100%;
  background-color:red;
}