与CSS网格重叠的段落

时间：2019-05-02 17:49:36

标签： html css position overlapping paragraph

enter image description here我正在尝试用纯文本构建传记页面，我希望我的文本能填满所有空白。我想为此项目使用CSS GRID，不想处理浮点数。我将添加一张图像，向您展示我的外观以及问题所在，也许有人会知道解决方法。 我没有在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;。似乎无法正常运作...请看一下最后一张图片。图片下方仍然留有空白enter image description here

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

正如G-cyr所指出的，两个部分都设置为跨越代码中的第4行。解决问题的最简单方法是将传记2的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>

答案 2 :(得分：1)

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

相关问题
最新问题