CSS:使相对定位的父级适合绝对定位的子级的高度

Question

我正在尝试制作一个简单的幻灯片。到目前为止，基本标记如下所示:

<h1>My Slideshow</h1>

<p>This paragraph behaves as expected.</p>

<div class="slide-container">
  <div class="slide">
    <h2>First Slide</h2>
    <p>Some stuff on this slide…</p>
  </div>

  <div class="slide">
    <h2>Second Slide</h2>
    <p>And some more stuff here…</p>
  </div>
</div>

<p>This paragraph will disappear beneath the stacked images.</p>

这是对应的CSS:

.slide-container {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;

  /* just for the looks */
  width: 20em;
  padding: 0 1em;
  border: 1px solid steelblue;
  background: white;
}

问题是，.slide-container 不适合其子级(或多个子级).slide 的高度(参见屏幕截图)。

我知道我可以手动设置 .slide-container 的高度，但我想将它放在高度可变的流体网格中。有什么办法可以实现吗？

Answer 1

绝对定位的元素在逻辑上与其父级相关联，但不是“物理上”。它们不是布局的一部分，因此父项无法真正看到它们有多大。您需要自己编写大小，或者使用 JavaScript 嗅探它并在运行时设置它。