html - 将相对定位的父 div 的高度扩展到绝对定位的子 div 的高度

Question

我在 SO 上看到过很多与此类似的问题，但我还没有找到适合我情况的解决方案。我从阅读的解决方案中尝试过的是将左列的高度或最小高度设置为等于图像或右列的高度 通过 JS/Jquery 但不知何故它不起作用，我不知道为什么。

我有一个相对定位的父 div，它有两个子 div(列)。第一个子 div(左)是相对定位的，第二个子 div(右)是绝对定位的。左边的子 div 有一些文本，而右边的子 div 有一个图像。父 div 的高度与左子 div 的高度一样远，并且它不显示右子 div 中图像的大部分。

如何使父 div 扩展到与右子 div 中的图像相同的高度。

布局非常重要，所以我无法更改它。欢迎使用 Css 和 JS/jQuery。

HTML

<div class="parent" id="parent">
  <div class="leftcolumn">This is the left Column</div>
  <div class="rightcolumn"><img src="somelinkhere"></div>
</div>

CSS

.leftcolumn
{
   width: 25%;
   position: relative;
}

.rightcolumn
{
   width: 75%;
   position: absolute;
   right: 25%;
}

Answer 1

对于您实际想要实现的目标，使用绝对定位可能是最不灵活的方式。

如果您使用的是网格系统，我建议您使用它，但下面是使用 float 的 HTML 和 CSS 的“快速修复”。

img {
  width: 25%;
  /* for testing so we can see where image would be */
  height: 50px; background: #ccc;
}

.textcolumn {
  width: 75%;
}

.container {
  margin-bottom: 20px;
}

/* clearfix to make each container fully contain its floated elements */
.container:after {
  content: "";
  display: table;
  clear: both;
}

/* alternate the display between odd & even containers */
.container:nth-child(odd) img{  float: right; }
.container:nth-child(odd) .textcolumn {  float: left;}
.container:nth-child(even) img{  float: left;}
.container:nth-child(even) .textcolumn{  float: right; }

<div class="container">
  <div class="textcolumn">This is the text block that will float to the left </div>
  <img src="somelinkhere">
</div>
<div class="container">
  <div class="textcolumn">This is the text block that will float to the right</div>
  <img src="somelinkhere">
</div>