Как сделать так, чтоб блоки подстраивались под высоту самого высокого блока?
Нужно чтоб они были одной высоты. Т.к дивы обернуты в блок слайда, флексовое распределение высоты не работает.
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="reviews__block"> <img class="reviews__block-img" src="img/avatar-1.png" alt=""> <p class="reviews__block-text">текст</p> <p class="reviews__block-text reviews__block-subtext">текст</p> </div> </div> <div class="swiper-slide"> <div class="reviews__block"> <img class="reviews__block-img" src="img/avatar-2.png" alt=""> <p class="reviews__block-text">текст</p> <p class="reviews__block-text reviews__block-subtext">текст</p> </div> </div> <div class="swiper-slide"> <div class="reviews__block"> <img class="reviews__block-img" src="img/avatar-3.png" alt=""> <p class="reviews__block-text">текст</p> <p class="reviews__block-text reviews__block-subtext">текст</p> </div> </div> |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="reviews__block"> <img class="reviews__block-img" src="img/avatar-1.png" alt=""> <p class="reviews__block-text">текст</p> <p class="reviews__block-text reviews__block-subtext">текст</p> </div> </div> <div class="swiper-slide"> <div class="reviews__block"> <img class="reviews__block-img" src="img/avatar-2.png" alt=""> <p class="reviews__block-text">текст</p> <p class="reviews__block-text reviews__block-subtext">текст</p> </div> </div> <div class="swiper-slide"> <div class="reviews__block"> <img class="reviews__block-img" src="img/avatar-3.png" alt=""> <p class="reviews__block-text">текст</p> <p class="reviews__block-text reviews__block-subtext">текст</p> </div> </div>
CSS
.swiper { overflow-y: visible; overflow-x: clip; } .reviews__block { display: inline-block; position: relative; padding: 108px 46px 48px 48px; border: 2px solid #314b26; height: 100%; } .swiper-slide:nth-child(even) > .reviews__block{ background-image: url(../img/review-block-bg.jpg); background-size: cover; color: #fff; } .swiper-slide:nth-child(2n) .reviews__block-subtext{ color: rgba(255, 255, 255, 0.60); } .reviews__block-img { position: absolute; top: -80px; left: 50px; z-index: 1000; border-radius: 160px; border: 2px solid #314b26; } .reviews__block-text { max-width: 446px; min-height: 186px; line-height: 30.6px; } .reviews__block-subtext { margin-top: 20px; min-height: auto; color: #838383; } |
.swiper { overflow-y: visible; overflow-x: clip; } .reviews__block { display: inline-block; position: relative; padding: 108px 46px 48px 48px; border: 2px solid #314b26; height: 100%; } .swiper-slide:nth-child(even) > .reviews__block{ background-image: url(../img/review-block-bg.jpg); background-size: cover; color: #fff; } .swiper-slide:nth-child(2n) .reviews__block-subtext{ color: rgba(255, 255, 255, 0.60); } .reviews__block-img { position: absolute; top: -80px; left: 50px; z-index: 1000; border-radius: 160px; border: 2px solid #314b26; } .reviews__block-text { max-width: 446px; min-height: 186px; line-height: 30.6px; } .reviews__block-subtext { margin-top: 20px; min-height: auto; color: #838383; }
Дополнительно:
флексовое распределение высоты не работает
- ну вот и разберись с тем - почему не работает, а так если контейнеру в котором они лежат задать dislplay: flex; то раз там по умолчанию будет align-items: stretch; то они и будут одинаковой высоты
ну вывод тогда, ему надо ещё переопределить стиль height для swiper-slide, сделать его auto
Ответы:
Вот буквально первая ссылка в гугле
https://github.com/nolimits4web/swiper/issues/2372
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать блоки подстраивающиеся под высоту самого высокого блока, можно использовать CSS свойство display: flex; на контейнере, который содержит блоки. Это позволит автоматически выравнивать блоки по высоте самого высокого блока внутри контейнера.
Пример кода на HTML и CSS:
<div class="container"> <div class="block">Блок 1</div> <div class="block">Блок 2</div> <div class="block">Блок 3</div> </div>
.container { display: flex; } .block { flex: 1; background-color: #f0f0f0; padding: 10px; margin: 5px; }
В данном примере блоки внутри контейнера будут автоматически выравниваться по высоте самого высокого блока. Свойство flex: 1; применяется к блокам, чтобы они занимали все доступное пространство внутри контейнера и выравнивались по высоте.
Таким образом, используя CSS свойство display: flex; можно легко создать блоки, которые подстраиваются под высоту самого высокого блока внутри контейнера.