扩展相对 <div> 的高度以适应 children 绝对 <div> 的高度

Question

我有一个 div 相对位置，这个 div 有几个 children 绝对位置元素。每个 children 都有很少的元素并显示 flex 列。它们的大小可能不同，因为每个 children 的内容都不相同。如何扩展 parent div 的高度以恰好适合所有 children 的高度？

如果您查看检查元素，您会看到 parent div 采用适合内容的宽度，而不是高度。

（所以基本上我希望 div 和 class 团队的高度不为 0，但我不能给它一个固定的高度）

.teamate {
  position: absolute;
  width: 40%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.teamate .sub-line {
  width: 25%;
}

.teamate img {
  width: 55%;
}

.teamate p {
  width: 50%;
}

.team {
  position: relative;
}

<div class="team">

    <div class='teamate'>
        <img src="style/img/leftphoto.png" alt="">
        <h1>FIRST TEAMATE</h1>
        <h2>ROLE AND POSITION</h2>
        <img class="sub-line" src="style/img/subline.png">
        <p>
            Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
        </p>
    </div>


    <div class='teamate'>
        <img src="style/img/leftphoto.png" alt="">
        <h1>FIRST TEAMATE</h1>
        <h2>ROLE AND POSITION</h2>
        <img class="sub-line" src="style/img/subline.png">
        <p>
            Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
        </p>
    </div>


    <div class='teamate'>
        <img src="style/img/leftphoto.png" alt="">
        <h1>FIRST TEAMATE</h1>
        <h2>ROLE AND POSITION</h2>
        <img class="sub-line" src="style/img/subline.png">
        <p>
            Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
        </p>
    </div>

    <div class='teamate'>
        <img src="style/img/leftphoto.png" alt="">
        <h1>FIRST TEAMATE</h1>
        <h2>ROLE AND POSITION</h2>
        <img class="sub-line" src="style/img/subline.png">
        <p>
            Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
        </p>
    </div>
  
</div>

Answer 1

您可以使用 2 列 CSS-Grid 来完成。这是通过使用 .team { display: grid; grid-template-columns: repeat(2, 1fr); }

实现的

接下来您将 margin-top 添加到第二个 child，这样第二个 div（右侧）将稍微向下移动。

由于网格的原因，第 3 个元素（左侧的第 2 个元素）也将移到下方。为了应对这一点，对于接下来的每张卡片，您添加一个负边距，等于第二个 child 边距。为此，您可以使用：.team div:nth-child(2n + 3) 作为选择器。

.teamate {
  width: 40%;
}

.teamate .sub-line {
  width: 25%;
}

.teamate img {
  width: 55%;
}

.teamate p {
  width: 50%;
}

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.team div:nth-child(2) {
  margin-top: 100px;
}

.team div:nth-child(2n + 3) {
  margin-top: -100px;
}

<div class="team">

  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>


  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>


  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>

  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>


  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>

  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>

</div>

扩展相对 <div> 的高度以适应 children 绝对 <div> 的高度

Expand height of relative <div> to fit height of children absolute <div>

html

css

height