div 没有具体身高的亲戚

Question

如何在 div 没有特定身高的亲戚后添加一些内容？

#team-image-contenitor {
  position: relative;
  margin: 0 auto;
}
#team-image-contenitor img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#team-image-contenitor img.top:hover {
  opacity: 0;
}

<div class="fusion-one-third one_third fusion-column staff-details">
  <div id="team-image-contenitor">
    <img class="bottom" src="http://lorempixel.com/400/200/sports/1" alt="">
    <img class="top" src="http://lorempixel.com/400/200/sports/2" alt="">
  </div>
  <h3>
    title<br>
    title title
  </h3>
  <div class="bio_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia dui sit amet sem porta pellentesque. Suspendisse vitae vestibulum augue. Pellentesque nec dignissim sem. Donec vitae eleifend leo. Vivamus euismod augue ut maximus consectetur. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Donec nec feugiat urna, nec euismod magna. Proin tempor risus in tempor mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia dui sit amet sem porta pellentesque. Suspendisse
    vitae vestibulum augue. Pellentesque nec dignissim sem. Donec vitae eleifend leo. Vivamus euismod augue ut maximus consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec feugiat urna, nec euismod magna. Proin tempor risus
  </div>
</div>

我希望这段文字出现在 div 之后。

Answer 1

将图像的 position: absolute 更改为 position: relative。做起来很简单...如果这不是您的意思，您应该尝试更好地解释 ;)

结帐the revised fiddle

Answer 2

当您执行 position: absolute; 时，会将您的元素从文档的常规流中移除，因此文本无法与其有任何位置关系

在这种情况下，您可以使用 Jquery 获取图像的 height 然后使用图像的高度成为内容的 margin-top 以避免重叠。 .

div 没有具体身高的亲戚

div Relative Without a Specific Height

html

css

css-position