堆叠图像父div高度

Question

我有一个动态图片库，其中几个图像堆叠在一起（使用position：absolute; top：0; left：0和opacity：0）。缩略图放在底部（因此缩略图需要位于最高的图像下方）。然后，用户单击缩略图，并显示相应的堆叠图像。

我很难将缩略图放在堆叠的图像下面，因为定位绝对会将图像从流中取出，因此父div没有高度...如果所有图像都有固定的高度，我的解决方案是在除第一个图像之外的所有图像上使用绝对位置（以便第一个图像设置父div的高度，并使用此div下方的缩略图）。 但如果我有不同高度的图像，我想在最高的图像下方放置缩略图。

画廊的尺寸也相应（即画廊位于左侧，占窗户宽度的50％）。

这是我的HTML：

<div id="product-gallery">
    <div id="slides">
        <div class="slide active"><img...></div>
        <div class="slidee"><img...></div>
        <div class="slide"><img...></div>
        ...
    </div>

    <div id="thumbnails">
        ...
    </div>
</div>

我不想依靠服务器端脚本或javascript来找到最高图像的高度...我喜欢保持一切极简主义:)但CSS3很好。

非常感谢任何提示。