html - 与CSS网格重叠的段落

Question

我正在尝试用纯文本构建一个传记页面，我希望我的文本填充所有空白区域。我想在这个元素中使用 CSS GRID，不想处理 float 。我将添加一张图片来向您展示我想要的外观以及我的问题出在哪里，也许有人会知道解决方法。我没有在这个 HTML 中写下所有行，因为它太多了。但是你可以在图像中看到。

我知道我在同一位置使用了 2 个元素，但我想向您展示我希望我的文本如何填充空白区域。

请随时给我看另一个示例，其中包含使文本填充所有空白区域的方法。

.bio-content {
  display: grid;
  margin-top: 10rem;
  grid-template-columns: 3fr;
  grid-template-rows: 3fr;
}

.bio-content .info-img {
  margin-left: 1.5rem;
  grid-column: 1/2;
  grid-row: 1/2;
}

.bio-content .biography,
.bio-content biography2 {
  margin-left: 2rem;
  margin-bottom: 0rem;
  line-height: 30px;
  color: white;
  border-left: none;
  padding: 0 1rem;
}

.bio-content .biography {
  grid-column: 2/4;
  grid-row: 1/4;
}

.bio-content .biography2 {
  grid-column: 1/4;
  grid-row: 3/4;
}

.bio-content table {
  grid-row: 2/3;
  grid-column: 1/2;
}

/* G-CYR : I added bg to see white text */
body {background:gray;}

<main id="bio">
  <div class="container">
    <div class="bio-content">
      <div class="info-img">
        <img src="/Core/img/bio.jpg" alt="">
        <table>
          <tr>
            <td>NAME:</td>
            <td>LAZAR ANGELOV</td>
          </tr>
          <tr>
            <td>HEIGHT:</td>
            <td>6"0(180 CM)</td>
          </tr>
          <tr>
            <td>WEIGHT:</td>
            <td>195 LBS(88 KG)</td>
          </tr>
          <tr>
            <td>DATE OF BIRTH:</td>
            <td>SEPTEMBER 22ND, 1984</td>
          </tr>
          <tr>
            <td>BIRTHPLACE:</td>
            <td>SOFIA,BULGARIA</td>
          </tr>
        </table>
      </div>
      <div class="biography">
        <h1>Biography</h1>
        <p>Before becoming a bodybuilder and a personal point guards of his class. At the age of 16 he bodies.</p>

        <p> He dedicated his life to bodybuilding and since Lazar dominates other bodybuilders with balanced physique and incredible definition.</p>

      </div>
      <div class="biography2">
        <p>
          <p>He owns some of the best abs in the world. As a personal trainer he has been able to transform the chance to receive everything needed for reaching the maximum physical potential without using steroids.</p>
      </div>
    </div>
  </div>
</main>

编辑编辑我试图删除网格行并定义 .biography2 grid-row:4/4;并且似乎没有按照我想要的方式工作...请查看最后一张图片。它仍然是图片下方的空白区域

Answer 1

在这种情况下，如果您想要这样的文本，唯一的解决方案是使用 float 。