Задать вопрос
@Overlord934

Как сделать так, чтоб блоки подстраивались под высоту самого высокого блока?

654bed17edca5183446205.png
Нужно чтоб они были одной высоты. Т.к дивы обернуты в блок слайда, флексовое распределение высоты не работает.
<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;
}
  • Вопрос задан
  • 225 просмотров
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 1
godsplan
@godsplan
Вот буквально первая ссылка в гугле
https://github.com/nolimits4web/swiper/issues/2372
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы