我有一个相对定位的div，其中包含另外三个绝对定位的div，我将它们用作滑块。每个绝对定位的div都包含一个带有width:100%的图片。
问题是，当我想要在我的滑块下方定位内容时，内容会与幻灯片重叠（因为div是绝对定位的，我不知道实际高度-它因图片宽度为100%而变化）。
如何在滑块下方定位内容？
目前，我正在使用一个JavaScript函数来检索图像的高度，并将该高度添加为内容下方的填充，但我更喜欢使用纯CSS。
这可能吗？（我不想使用媒体查询，因为需要处理很多分辨率）
以下是代码：（有关实时示例，请查看此fiddle：https://jsfiddle.net/g6ppqxLf/5/）
HTML：
问题是，当我想要在我的滑块下方定位内容时，内容会与幻灯片重叠（因为div是绝对定位的，我不知道实际高度-它因图片宽度为100%而变化）。
如何在滑块下方定位内容？
目前，我正在使用一个JavaScript函数来检索图像的高度，并将该高度添加为内容下方的填充，但我更喜欢使用纯CSS。
这可能吗？（我不想使用媒体查询，因为需要处理很多分辨率）
以下是代码：（有关实时示例，请查看此fiddle：https://jsfiddle.net/g6ppqxLf/5/）
HTML：
<div id="slideshow" class="latime_100">
<img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"></img>
<div id="slider_1" class="slider" >
<img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg"></img>
</div>
<div id="slider_2" class="slider">
<img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg"></img>
</div>
<div id="slider_3" class="slider">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwazmPOPcUTK1AmVSPQjH7YLlBywxTpkQi4LEQ40HJOg6_8Qyw"></img>
</div>
<img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"></img>
</div>
CSS（navigare_st和navigare_dr是滑块箭头）：
.slider{
width:100%;
position:absolute;
}
.slider img{
display: block;
margin: 0 auto;
width:100%;
min-width: 1024px;
}
#slideshow{
position: relative;
background-color: white;
z-index:100;
}
#navigare_st{
position: absolute;
z-index:1000;
left:0px;
top:45%;
cursor: pointer;
width:2.5%;
}
#navigare_dr {
z-index: 1000;
position: absolute;
right: 0px;
top: 45%;
cursor: pointer;
width:2.5%;
}