外部 div 不能有自己的高度

Question

我有一个调用 #slide 的外部 div，里面有一些图像。每个图像都有 position: absolute; 用于在 #slide div.

内自动调整自身大小

问题是当我这样设置时，#slide的高度变为0，然后我无法将内容放在div下方。

现在文字看起来像在图片后面。我想把文字放在 #slide.

下

有什么方法可以解决这个问题吗？

#slide {
  position: relative;
  width: 100%;
  object-fit: cover;
  margin: 0 auto;
}
#slide-list {
  margin: 0 auto;
  position: relative;
  width: 1170px;
  height: 100%;
  display: flex;
  flex-flow: row;
}
.slide-l-quarter {
  position: relative;
  width: calc(100% / 4);
  height: auto;
  margin: 0 5px;
}
.slide-l-quarter img {
  position: absolute;
  width: 100%;
  height: auto;
}
#text {
  font-size: 40px;
}

<section id="slide">
  <div id="slide-list">
    <ul class="slide-l-quarter">
   <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </ul>
    <ul class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </ul>
    <ul class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </ul>
    <ul class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </ul>
  </div>
  <div id="text">
    Some Text
  </div>
</section>

Answer 1

当您为 img 标签使用 absolute 位置时，它不会为其父标签贡献任何高度。

我从 img 中删除了 position: absolute 并且还将您的 ul 更改为由 ul 标签包裹的 li。

#slide {
  position: relative;
  width: 100%;
  object-fit: cover;
  margin: 0 auto;
}

#slide-list {
  margin: 0 auto;
  position: relative;
  width: 1170px;
  height: 100%;
  display: flex;
  list-style: none;
}

.slide-l-quarter {
  position: relative;
  width: calc(100% / 4);
  height: auto;
  margin: 0 5px;
}

.slide-l-quarter img {  
  width: 100%;
  height: auto;
}

#text {
  font-size: 40px;
}

<section id="slide">
  <ul id="slide-list">
    <li class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </li>
    <li class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </li>
    <li class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </li>
    <li class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </li>
  </ul>
  <div id="text">
    Some Text
  </div>
</section>

Answer 2

   img {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
    }

将此添加到您的 css

外部 div 不能有自己的高度

Outer div can't has its own height

html

css

position

height

absolute