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

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

如果您使用的是网格系统，我建议您使用它，但下面是HTML＆amp;仅限CSS＆＃34; quickfix＆＃34;使用花车。

＆＃13;

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

＆＃13;

<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>

＆＃13;

将相对定位父div的高度展开为绝对定位子div的高度

1 个答案: