html - 绝对定位子父子高度为0

Question

这是一个常见问题，但我仍然没有找到解决问题的方法。

.parent 是一个 slider ，.child 是图片。我需要将 .child 高度(这是一个绝对定位的元素)传递给 .parent。

.parent 的高度为 0px。有什么想法吗？

提前致谢。

<div class="parent">
   <img class="child"></div> 
</div>

.child {
  position: absolute; //It must be absolute , because slider works with this
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

Answer 1

正如我在评论中提到的，您或许可以添加两个 <img>元素。一个是 position: absolute - 根据您的应用程序要求，另一个带有 visibility: hidden但是用position: relative .

如果你不想弄乱标记，你可以用伪元素做一些类似的事情，比如 :after或 :before .但思路是一样的。

父级现在占据了图像的整个高度。此解决方案可能有效，也可能无效，具体取决于您的应用程序，这在您的问题中不是很清楚，但也许值得一试。

.parent {
  background: #AAA;
}

.child {
  position: absolute;
}

.child-hidden {
  visibility: hidden;
}

<div class="parent">
  <img class="child" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png">
  <img class="child-hidden" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png">
</div>