Wie Bildhöhe zu anderen Teil des div mit gleichen Klassennamen

Question

Ich habe diese 3 container divs und in ihr Textdiv ist schwebte links und Bild div ist schwebte nach rechts. Ich möchte die Höhe des Bildes entsprechend der Höhe des Textes einstellen. Gibt es das überhaupt mit jQuery? Oder sollte ich jedem Div verschiedene Klassennamen geben und die Höhe festlegen?

<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

Versuchen Sie es mit diesen Schnipsel

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

Answer 2

CSS3 Flexbox kann mit schwierigen Layout Herausforderungen helfen, die mit Schwimmern allein einmal schwierig oder unmöglich waren:

.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; 
}