введите описание изображения здесь Я пытаюсь создать страницу биографии с простым текстом и хочу, чтобы мой текст заполнил все пустое пространство. Я хочу использовать CSS GRID для этого проекта, не хочу иметь дело с поплавками. Я добавлю изображение, чтобы показать вам, как я хочу выглядеть и где моя проблема, может быть, кто-то будет знать, как исправить. Я не написал в этом HTML все строки, потому что это много. Но вы можете видеть на изображении.

Я знаю, что использовал 2 элемента span в одном и том же месте, но я хотел показать вам, как я хочу, чтобы мой текст заполнил пустое пространство.

Пожалуйста, не стесняйтесь показывать мне другие примеры с методами, чтобы текст заполнял все пробелы.

.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; и, кажется, не работает так, как я хочу ... Пожалуйста, посмотрите на последнее изображение. Он остается пустым пространством под изображением  введите описание изображения здесь

-1
user11261905 2 Май 2019 в 20:49

3 ответа

Лучший ответ

В этом случае, если вы хотите, чтобы текст был таким, единственное решение - использовать float.

1
Constantin CT 13 Май 2019 в 15:22

Просто удалите определение 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
Temani Afif 2 Май 2019 в 19:37

Как указал G-cyr, оба раздела настроены так, чтобы охватить строку 4 в вашем коде. Самый простой способ решить вашу проблему - установить для css of biography2 значение 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>
1
Rachel Gallen 2 Май 2019 в 19:45