与 css 网格重叠的段落

Question

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

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

请随时向我展示另一个示例，其中包含使文本填充所有白色的方法space。

.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>

EDIT EDIT 我试图删除网格行并定义 .biography2 grid-row:4/4;而且似乎没有按我想要的方式工作......请看最后一张图片。它在图片下方仍然是白色 space

Answer 1

只需从两个传记中删除 grid-row 定义：

.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;
}

.bio-content .biography2 {
  grid-column: 1/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>

Answer 2

正如 G-cyr 指出的那样，这两个部分都设置为跨越代码中的第 4 行。解决问题的最简单方法是将 biography2 的 css 设置为 grid-row:4/4 而不是 3/4。这样，您的传记第 2 段将出现在最后一行，其余部分出现在前 3 行。

.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: 4/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>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique est enim, a hendrerit odio sagittis sit amet. Cras augue tortor, dignissim in imperdiet sit amet, lobortis eget orci. Fusce arcu dui, sollicitudin sit amet elementum vel, suscipit ut justo. Nulla quis pretium sem. Aenean ut nibh leo. Vivamus cursus nibh et augue elementum facilisis. Aenean tortor mauris, maximus vestibulum cursus quis, maximus at est. Nunc ultricies luctus mi elementum.
        </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>
                  <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique est enim, a hendrerit odio sagittis sit amet. Cras augue tortor, dignissim in imperdiet sit amet, lobortis eget orci. Fusce arcu dui, sollicitudin sit amet elementum vel, suscipit ut justo. Nulla quis pretium sem. Aenean ut nibh leo. Vivamus cursus nibh et augue elementum facilisis. Aenean tortor mauris, maximus vestibulum cursus quis, maximus at est. Nunc ultricies luctus mi elementum.
        </p>
      </div>
    </div>
  </div>
</main>

Answer 3

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

与 css 网格重叠的段落

Paragraphs overlapping with css grid

html

css

position

paragraph

overlapping