Блог

Главная - Вопросы по программированию - Удалите лишнее пространство по высоте после каждого контейнера

Удалите лишнее пространство по высоте после каждого контейнера

#html #css

Вопрос:

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

 .programs_content {
  display: grid;
  grid-gap: 10px;
  padding-top: 4em;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: repeat(auto-fill, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  height: auto;
}

.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
}

.rect-img {
  width: 100%;
  height: 40%;
  object-fit: cover;
}

.caption {
  display: block;
  font-weight: bold;
  text-align: center;
} 
 <div class="programs_content">
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="1.png" alt="" />
    </a>
    <span class="caption">text1</span>
  </div>
  

  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="2.png" alt="" />
    </a>
    <span class="caption">text2</span>
  </div>
  
  
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="3.png" alt="" />
    </a>
    <span class="caption">text3</span>
  </div>
  
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="4.png" alt="" />
    </a>
    <span class="caption">text4</span>
  </div>
  
</div>

Но по какой-то причине высота каждого квадрата слишком велика, я хочу ограничить его непосредственно перед каждым текстом. Я пытаюсь добавить position: absolute в rect-img класс, и он удаляет некоторое пространство, но текст под изображением исчезает. Как я могу это решить? С уважением

Ответ №1:

Если вы стремитесь к отзывчивости, используйте flexbox на .rect-img-контейнере

   .programs_content {
    display: grid;
    grid-gap: 10px;
    padding-top: 4em;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: minmax(auto, 1fr);
    column-gap: 10px;
    row-gap: 10px;
  }

  .rect-img-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* or space-around || space-evenly */
  }

  .rect-img {
    width: 100%;
    height: 40%;
    object-fit: cover;
  }

  .caption {
    font-weight: bold;
    text-align: center;
    height: auto;
  }

Ответ №2:

Пожалуйста, попробуйте с этим. Я верю, что это решит вашу проблему.

HTML

 <div class="programs_content">
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="https://picsum.photos/id/237/200/300" alt="" />
    </a>
    <span class="caption">text1</span>
  </div>
  

  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="https://picsum.photos/id/237/200/300" alt="" />
    </a>
    <span class="caption">text2</span>
  </div>
  
  
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="https://picsum.photos/id/237/200/300" alt="" />
    </a>
    <span class="caption">text3</span>
  </div>
  
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="https://picsum.photos/id/237/200/300" alt="" />
    </a>
    <span class="caption">text4</span>
  </div>
  
</div>

CSS:

 .programs_content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.rect-img-container {
  display: grid;
  text-align: center;
}

.caption {
  font-weight: bold;
  text-transform: capitalize;
}

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

Метки: