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

Question

我用 div 的 3 个部分制作了负责任的网络幻灯片 img，给它们 (.slide_centent) 绝对位置和父级 (.slides) 相对位置，然后是父级 ( .slides) 不再有高度。我给它 px,% height 但是当我只减少浏览器时 div(.slide_centent) 与图像一起减少，parent(.slides)' 底部固定在该点，它会产生巨大的黑色而不是看起来很好。有什么想法吗？

这里是HTML

<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>

这里是CSS

section.slides {
     width: 100%; 
     height: auto; 
     position: relative; 
}

section .slide_centent{
     width: 100%;
     position: absolute; 
     transition: all 3s;
 }
section .slide_centent img{ 
     width: 100%; 
     height: 100%; 
     min-width: 1500px;}

Answer 1

当您将绝对位置添加到某个元素时，您会将其从页面流中移除，因此其他元素 'unaware' 它的存在。在你的情况下， 'slides' 不会知道 'slides_centent' （因为 'slides_ceneten' 不在页面流中），并且无法保持 [=19= 的高度]. 我认为在这种情况下尽量避免绝对位置会更好，但有些事情你可以尝试。

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

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

I've got a issue related with position and height auto

css

height

position

responsive-design

auto