我有一个与位置和高度自动相关的问题

问题描述

我用div的3个部分制作了负责任的Web幻灯片img，为它们提供了（.slide_centent）位置绝对位置和相对于parent（.slides）位置的相对位置，之后parent（.slides）不再具有高度了。我给它px，％高度，但是当我缩小浏览器时，只有div（.slide_centent）与图像一起缩小，parent（.slides）的底部固定在该点上，它会变成黑色，看上去不太好。有什么想法吗？

这是HTML

df.index[[1,2]]
Out[181]: Index(['second','third'],dtype='object')

这是CSS

<section class="slides">
    <div class="slide_centent">
        <a href="#"><img src="images/images1.jpg" alt="images1"></a>
        <button class="slidesbtn1">자세히 보기</button>
    </div>
    <div class="slide_centent">
        <a href="#"><img src="images/images2.jpg" alt="images2"></a>
        <button class="slidesbtn2">자세히 보기</button>
    </div>
    <div class="slide_centent">
        <a href="#"><img src="images/images3.jpg" alt="images3"></a>
        <button class="slidesbtn3">자세히 보기</button>
    </div>
</section>

解决方法

将绝对位置添加到元素时，会将其从页面流中删除，因此其他元素“不知道”它的存在。在您的情况下，“幻灯片”不会知道“ slides_centent”（因为“ slides_ceneten”不在页面中），并且无法保持孩子的身高。 我认为在这种情况下，最好避免绝对位置，但是您可以尝试一些方法。

在这里看看：Make absolute positioned div expand parent div height