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

【问题标题】：How to set image height to other part of div with same class names如何将图像高度设置为具有相同类名的 div 的其他部分
【发布时间】：2016-08-30 21:29:44
【问题描述】：

我有这 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>

【问题讨论】：

为什么要在 jquery 中设置高度而不仅仅是 css？你可以包含你的代码来向右/向左浮动吗？
因为在每个文本 div 中，文本会有所不同，因此容器的高度会有所不同，但图像高度不会。我想沿着 div 渲染图像
你能提供一个最小的例子来说明你的问题和你的期望吗？
这可能会有所帮助：plnkr.co/edit/gM2amcTOWa9Abc91imS2?p=info

标签： javascript jquery html css

【解决方案1】：

尝试使用这个 sn-p

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

【讨论】：

【解决方案2】：

CSS3 Flexbox 可以帮助解决曾经单独使用浮动很难或不可能完成的布局挑战：

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

.textdiv, .imagediv {
    display: flex;
}

【讨论】：

【解决方案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;
}

【讨论】：