Css 使用位置设置其内容的div高度：绝对

我正在努力实现以下目标：

<div>
    <div class="img"><img src=""></div>
    <div class="img"><img src=""></div>
    <div class="img"><img src=""></div>
</div>    

包含图像的div将在幻灯片中使用，因此它们需要一个放在另一个上面，第一个显示，另一个隐藏

但是，当我将position:absolute设置为div时，外部div的高度会收缩并破坏整个布局。关于如何解决这个问题有什么建议吗

---

编辑：HTML结构是不可协商的。

我认为您的方法是错误的，实现这一点的方法是不要让div以绝对位置相互堆叠。将最后两个div上的css设置为display:none。如果要移动到下一个图像，请将图像设置为“显示：块”。（所示示例使用JQuery）

然后把另外两个藏起来

$("div#image2").siblings().hide();

---

您需要添加一个id属性，以便可以唯一地选择图像。

最后使用JQuery根据图像内容设置div的高度。只需要在循环中添加一行代码。案例结束。

明确定义

div

的维度。无法定义，因为图像大小可能会有所不同。为什么不使用单个div和单个图像标记。你可以在任何时候更改图像的src属性，无论是在点击时还是在特定时间后，通过javascript函数都可以。这是通过CMS生成图像的方式，改变它将是一个巨大的痛苦，这就是为什么我这样陈述这个问题，请不要提出其他HTML结构。它们是隐藏的，我知道如何使用显示和隐藏。问题是如果我不把它们一个放在另一个上面，它们是垂直堆放的。由于我使用的不是.show和.hide，而是fadeIn和fadeOut，所以图像必须在使用粗糙的show/hide幻灯片之前完全定位。但是如果你想使用fadeIn和out，div必须是一个在另一个之上。

$("div#image2").siblings().hide();