Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы

Позиционирование изображения, текста и ссылки внутри элемента CSS-решетки с использованием flex

На чтение 13 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. Основные шаги для реализации
  4. Пример реализации
  5. HTML
  6. CSS
  7. Заключение

Вопрос или проблема

Я создаю макет html/css, который должен выглядеть так:

(https://i.sstatic.net/Z49ekM8m.png)

Каждый блок является ссылкой. Чтобы расширить активную область ссылки на весь блок и расположить текст внизу каждого элемента сетки, я установил каждую ссылку как флекс-бокс. Так что у меня сейчас есть макет сетки с флекс-боксом внутри каждого элемента сетки, если это имеет смысл.

На данный момент мне удалось достичь этого:

(https://i.sstatic.net/itbwRXvj.png)

Однако, когда я пытаюсь добавить изображение в блок “Обучение с инструктором”, я сталкиваюсь со всяческими проблемами. Как я могу добавить мое изображение, не нарушая остальной дизайн?

Я пробовал вставить изображение в div для флекс-бокса, и это просто разрушает все.

Вот “рабочий” код, до того как я попытался добавить свое изображение:

.vtx_gc_001 {
  display: grid;
  height: 450px;
  /*padding: 10px;*/
  gap: 30px;
  background-color: #f1f1f1;
}

.vtx_gi {
  border-radius: 50px;
  display: flex;
  width: 100%;
  height: 100%;
}

#vtxgi1 {
  grid-column: 1 / span 2;
  background-color: #00943c;
}

#vtxgi2 {
  grid-row: 2 / 4;
  background-color: #008299;
  border-radius: 0px;
  border-bottom-right-radius: 50px;
}

#vtxgi3 {
  grid-column: 2;
  grid-row: 2;
  background-color: #BEC1C3;
}

#vtxgi4 {
  grid-column: 2;
  grid-row: 3;
  background-color: #00609C;
}

#vtxgi5 {
  grid-column: 1 /span 2;
  grid-row: 4;
  background-color: #F3CF40;
}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5 {
  display: flex;
  align-self: last baseline;
}

.vtx_grid_a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
<div class="vtx_gc_001" style="grid-template-columns: auto auto;grid-template-rows: auto auto auto auto;">
  <div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a" id="vtx_a1" style="padding:20px;padding-left:30px;color:white;font-weight:bold;font-size:20px;">Exchange 2024</a></div>
  <div class="vtx_gi" id="vtxgi2"><a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:40px;text-align:center;color:white;font-weight:bold;font-size:20px;">Instructor Led Training</a></div>
  <div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Course Catalog</a></div>
  <div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Partner Resources</a></div>
  <div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Get Certified!</a></div>
</div>

Дополнение

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

введите описание изображения здесь

Я хочу добавить еще одно изображение – на этот раз в блок “Получить сертификат” внизу, чтобы мой финальный вариант выглядел как-то так – хотя я хочу применить эффект радиуса границ, который вы видите на других коробках в верхнем и нижнем левом углу этого изображения.

введите описание изображения здесь

Я пытался адаптировать решение, которое я получил из своего предыдущего поста, но у меня в итоге получается вот это.

введите описание изображения здесь

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

Шрифт awesome, который вы видите на первых двух изображениях, появляется, потому что я взял это изображение из своей CMS – но они не отображаются, когда я открываю страницу локально.

Вот мой код. У меня странная смесь встроенного и внешнего CSS – это также обусловлено ограничениями в CMS, где я в конечном итоге должен развернуть страницу, так что я не могу с этим ничего сделать.

<style>
.vtx_gc_001 {
    display: grid;
    height: 450px;
    /*padding: 10px;*/
    gap:30px;
    background-color: #ffffff;

}
.vtx_gi {
    border-radius: 50px;
    display: flex;
    width: 100%;
    height: 100%;
    /*justify-content: center;*/
    /*align-items: center;*/
    /*align-items: center;*/ 
    /*justify-content: center;*/
    /*padding: 20px;*/
    /*font-size: 30px;*/
    /*text-align: center;*/
}

#vtxgi1 {
    grid-column: 1 / span 2;
    background-color: #00943c;
}

#vtxgi2 {

    grid-row: 2 / 4;
    background-color: #008299;
    /*border-radius: 0px;
    border-bottom-right-radius: 50px;*/

}

#vtxgi3 {
    grid-column: 2;
    grid-row: 2;
    background-color: #BEC1C3;
}

#vtxgi4{
    grid-column: 2;
    grid-row: 3;
    background-color: #00609C;

}

#vtxgi5 {
    grid-column: 1 /span 2;
    grid-row: 4;
    background-color: #F3CF40;

}

#vtx_a1, 
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5

{
    display: flex;
    align-self: last baseline;

    }

.vtx_grid_a {

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

} 

.vtx_gi {
  position: relative;
  overflow: hidden;
}

.vtx_gi .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  right: 0;
  height: 70%;
}

.vtx.gi .image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  bottom: 0;
  right: 0;
  height: 100%;

}

</style>

<div class="vtx_gc_001">
  <div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&amp;rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a" id="vtx_a1" style="padding:20px;padding-left:30px;color:#FFFFFF;font-weight:bold;font-size:20px;">Exchange 2024       <i class="fa fa-arrow-right"></i></a></div>
  <div class="vtx_gi" id="vtxgi2"><a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:30px;text-align:center;color:#FFFFFF;font-weight:bold;font-size:20px;"> <img class="image" src="https://cdn5.dcbstatic.com/files/v/e/vertexlearning_docebosaas_com/userfiles/13168/vilt.jpg" alt="Image" />Instructor Led Training   <i class="fa fa-arrow-right"></i></a></div>
  <div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:#FFFFFF;font-weight:bold;font-size:20px;">Course Catalog   <i class="fa fa-arrow-right"></i></a></div> 
  <div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:#FFFFFF;font-weight:bold;font-size:20px;">Partner Resources   <i class="fa fa-arrow-right"></i></a></div>
  <div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:#FFFFFF;font-weight:bold;font-size:20px;"><img src="https://cdn5.dcbstatic.com/files/v/e/vertexlearning_docebosaas_com/userfiles/13168/crt_img.jpg" class="image2"/>Get Certified!   <i class="fa fa-arrow-right"></i></a></div> 
</div>


</div><div class="s-prose js-post-body" itemprop="text">

Флекс отлично подходит для других плиток, но для плитки, содержащей изображение, я бы использовал сетку для управления её макетом. Это позволяет нам задать размер второй строки (содержащей текст) как auto, что позволяет ей расти по мере оборачивания текста на узких экранах, а затем задать размер первой строки (содержащей изображение) как 1fr и, таким образом, просто занимать оставшееся пространство.

.vtx_gc_001 > a:nth-child(2) {
  display: grid;
  grid-template-rows: 1fr auto;
}

Вам также нужно использовать обертку со свойством относительно для изображения (я использовал <figure>), чтобы вы могли установить ваше <img> как абсолютно позиционированное. Это гарантирует, что внутренние размеры изображения не оказывают влияния на остальной макет.

body {
  background-color: #f1f1f1;
  margin: 30px;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
}

.vtx_gc_001 {
  height: 450px;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 30px;
}

.vtx_gc_001 > a {
  height: 100%;
  border-radius: 50px;
  display: flex;
  justify-content: start;
  align-items: end;
  color: white;
  padding: 20px 30px;
  text-decoration: none;
  box-sizing: border-box;
}

.vtx_gc_001 > a:nth-child(1) {
  grid-column: 1 / span 2;
  background-color: #00943c;
}

.vtx_gc_001 > a:nth-child(2) {
  grid-row: 2 / 4;
  background-color: #008299;
  border-radius: 0px;
  border-bottom-right-radius: 50px;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-content: stretch;
  align-items: stretch;
  gap: 20px;
}

.vtx_gc_001 > a:nth-child(2) > figure {
  margin: -20px -30px 0 -30px;
  position: relative;
}

.vtx_gc_001 > a:nth-child(2) > figure > img {
  position: absolute;
  left: 3px;
  top: 0;
  width: calc(100% - 3px);
  height: 100%;
  object-fit: cover;
}

.vtx_gc_001 > a:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  background-color: #BEC1C3;
}

.vtx_gc_001 > a:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
  background-color: #00609C;
}

.vtx_gc_001 > a:nth-child(5) {
  grid-column: 1 /span 2;
  grid-row: 4;
  background-color: #F3CF40;
}
<div class="vtx_gc_001">
  <a href="">Exchange 2024</a>
  <a href="">
    <figure>
      <img src="https://picsum.photos/id/1074/300">
    </figure>
    Instructor Led Training
  </a>
  <a href="">Course Catalog</a>
  <a href="">Partner Resources</a>
  <a href="">Get Certified!</a>
</div>

Я просто добавлю что-то, не нарушая поток, используя position: absolute для img. Это подразумевает, что его родитель должен быть position: relative, и также подпись нужно разместить над изображением.

.vtx_gc_001 {
  display: grid;
  height: 450px;
  /*padding: 10px;*/
  gap: 30px;
  background-color: #f1f1f1;
}

.vtx_gi {
  border-radius: 50px;
  display: flex;
  width: 100%;
  height: 100%;
}

#vtxgi1 {
  grid-column: 1 / span 2;
  background-color: #00943c;
}

#vtxgi2 {
  grid-row: 2 / 4;
  background-color: #008299;
  border-radius: 0px;
  border-bottom-right-radius: 50px;
}

#vtxgi3 {
  grid-column: 2;
  grid-row: 2;
  background-color: #BEC1C3;
}

#vtxgi4 {
  grid-column: 2;
  grid-row: 3;
  background-color: #00609C;
}

#vtxgi5 {
  grid-column: 1 /span 2;
  grid-row: 4;
  background-color: #F3CF40;
}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5 {
  display: flex;
  align-self: last baseline;
}

.vtx_grid_a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.vtx_gi {
  position: relative;
  overflow: hidden;
}

.vtx_gi .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  right: 0;
  height: 100%;
}
<div class="vtx_gc_001" style="grid-template-columns: auto auto;grid-template-rows: auto auto auto auto;">

  <div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a" id="vtx_a1" style="padding:20px;padding-left:30px;color:white;font-weight:bold;font-size:20px;">Exchange 2024</a></div>

  <div class="vtx_gi" id="vtxgi2">
    <img class="image" src="https://picsum.photos/100" alt="Image">
    <a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:40px;text-align:center;color:white;font-weight:bold;font-size:20px; position: relative;">Instructor Led Training</a></div>

  <div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Course Catalog</a></div>

  <div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Partner Resources</a></div>

  <div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Get Certified!</a></div>

</div>

.

Ответ или решение

Для решения задачи позиционирования изображения, текста и ссылки внутри элемента CSS Grid с использованием Flexbox, нам необходимо учесть несколько важных аспектов, которые позволят корректно интегрировать изображение, не нарушая остальной дизайн.

Основные шаги для реализации

  1. Структура HTML: Убедитесь, что структура HTML правильно организована. В каждом элементе Grid (например, в секции "Get Certified") у вас должна быть ссылка, которая содержит как изображение, так и текст.

  2. CSS стилизация:

    • Используйте свойства display: flex; и flex-direction: column; чтобы вертикально расположить содержимое (картинку и текст) внутри блока.
    • Чтобы растянуть область клика по ссылке на весь элемент Grid, установите width: 100%; и height: 100%; для ссылок.

  3. Позиционирование изображения:

    • Для изображения воспользуйтесь абсолютным позиционированием, чтобы оно занимало всю ширину контейнера и не влияло на высоту текста.
    • Оберните изображение в элемент <figure>, который будет иметь position: relative;.

  4. Настройка текста: Убедитесь, что текст помещен в нижней части блока посредством использования Flexbox.

Пример реализации

Вот некоторые ключевые подходы и пример кода для достижения требуемого результата:

HTML

<div class="vtx_gc_001">
    <a href="https://yourlink.com" class="vtx_gi" id="vtxgi1">
        Exchange 2024
    </a>
    <a href="https://yourlink.com" class="vtx_gi" id="vtxgi2">
        <figure>
            <img src="https://yourimageurl.com/image.jpg" class="image" alt="Instructor Led Training">
        </figure>
        Instructor Led Training
    </a>
    <a href="https://yourlink.com" class="vtx_gi" id="vtxgi3">Course Catalog</a>
    <a href="https://yourlink.com" class="vtx_gi" id="vtxgi4">Partner Resources</a>
    <a href="https://yourlink.com" class="vtx_gi" id="vtxgi5">
        <figure>
            <img src="https://yourimageurl.com/image2.jpg" class="image" alt="Get Certified!">
        </figure>
        Get Certified!
    </a>
</div>

CSS

.vtx_gc_001 {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto;
    height: 450px;
    gap: 30px;
    background-color: #f1f1f1;
}

.vtx_gi {
    border-radius: 50px;
    display: flex;
    flex-direction: column; /* Выравнивание элементов по вертикали */
    position: relative; /* Для абсолютного позиционирования изображений */
    overflow: hidden; /* Ограничивает содержимое блока */
}

.vtx_gi a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Выравнивает текст внизу */
    padding: 20px;
    text-decoration: none;
    color: white;
}

.vtx_gi img {
    position: absolute; /* Позволяет изображению занимать весь блок */
    top: 0;
    left: 0;
    width: 100%; /* Занимает всю ширину блока */
    height: auto; /* Сохраняет пропорции изображения */
    object-fit: cover; /* Наполнение изображения в блоке */
}

Заключение

Следуя данным рекомендациям, вы сможете разместить изображение, текст и ссылку в элементе CSS grid, используя Flexbox, без нарушений в дизайне. Важно, чтобы изображения находились внутри соответствующих элементов, и правильно настроенные стили позволяли им адаптироваться под различные размеры экрана.

Не забывайте проверять результаты на разных устройствах для обеспечения адаптивности вашего дизайна.

css flexbox grid image
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности