Css 堆叠图像父div高度

我有一个动态图像库，其中几个图像堆叠在一起（使用位置：绝对；顶部：0；左侧：0和不透明度：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很好

---

非常感谢您提供的提示。

将

填充底部：20%

传递到

幻灯片和高度
20%
传递到缩略图是否有效？你可以尝试将图片调整到100%的高度。你说没有javascript，那么图库是如何工作的呢？单选按钮？