Question

我有这3个容器div，在其中textdiv向左浮动，图像div向右浮动。我想根据文本的高度设置图像的高度。无论如何使用jQuery做到这一点？或者我应该为每个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>     
<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可以帮助解决困难的布局挑战，这些挑战曾经很难或不可能仅使用花车：

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

如何将图像高度设置为具有相同类名的div的其他部分

3 个答案: