扩展相对 <div> 的高度以适合子级绝对 <div> 的高度答案

【问题标题】：Expand height of relative <div> to fit height of children absolute <div>扩展相对 <div> 的高度以适合子级绝对 <div> 的高度
【发布时间】：2023-03-22 12:12:01
【问题描述】：

我有一个位置相对的 div，这个 div 有几个绝对位置的子元素。每个孩子都有很少的元素并显示弹性列。它们的大小可以不同，因为每个孩子的内容都不相同。如何扩展父 div 的高度以完全适合所有孩子的高度？

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

（所以基本上我希望班级团队的 div 高度不为 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>

【问题讨论】：

你不能。绝对子代不考虑相对父代的尺寸。我建议你重新考虑你的布局方法。
不清楚你想要达到什么效果。你有建议结果的图片吗？
这是我想做的结果图片：ibb.co/Lg0xZtk
如您所见，我需要右侧的两项比左侧的两项更位于页面下方，我认为相对和绝对可能是一个不错的选择，但显然所有否决票我认为我错了 lmao
不要使用相对定位和绝对定位，因为它会反应迟钝，而且处理起来很乱。最简单的方法是使用带有 flexbox 或网格的 2 列布局。使用nth-child 伪选择器将右列移到下面。我对 css-grid 解决方案的 anwser 展示了您如何做到这一点。

标签： html css height

【解决方案1】：

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

接下来，为第二个子元素添加一个 margin-top，以便将第二个 div（右侧）稍微移到下方。

由于网格，第三个元素（左侧的第二个元素）也将移动到下方。为了解决这个问题，对于接下来的每张卡片，您添加一个负边距，等于第二个子边距。为此，您可以使用：.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>

【讨论】：

你能告诉我 .team div:nth-child(2n + 3) 中的“n”代表什么吗？
@Mathi n 是一个具有不同用途的变量，代表0 或x-element。在这种组合中2n 表示每个第二个元素。 3n 将是每第三个元素。 + 3 从第三个元素开始。所以2n + 3作为一个整体是3, 5, 7, 9, 11, 13 ...的计算变量-css-tricks.com/how-nth-child-works