外部div不能拥有自己的高度

Question

我有一个外部div，它调用#slide，并且其中包含一些图像。每个图像都有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

当您将absolute位置用于img标签时，它不会为其父级增加任何高度。

我从position: absolute中删除了img，还用ul标签将您的li更改为ul。

#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