БЛОГ НА HUSL


Как выровнять 3 разные li относительно одного div блока

Автор вопроса: Матвей

Случился с проблемой при верстке, есть один див блок с тремя ul. В каждой ul не одинаковое количество li. Надо сделать так что бы li в каждой ul находились на одинаковом расстоянии по высоте. Пробовал сделать через vertical-align, не получается. введите сюда описание изображения

.services__items{
  display: flex;
  justify-content: space-between;
}

ul.services__item{
  background-color: #fff;
  width: 360px;
  padding: 45px 30px;
}

.services__item li{
  margin-bottom: 20px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.6px;
  color: #242121;
}

.services__item .services__item-name{
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  color: #01353E;
  margin-bottom: 58px;
}

.services__item .services__item-num{
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  color: #01353E;
  vertical-align: bottom;
}

.services__item-num sup{
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #01353E;
}
<div class="services__items">
          <ul class="services__item">
            <li class="services__item-name">Стандарт</li>
            <li>Проживание на вилле 6 ночей </li>
            <li>Номер категории стандарт</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 5 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li class="services__item-num">450<sup>$</sup></li>
          </ul>
          <ul class="services__item">
            <li class="services__item-name">Все включено</li>
            <li>Проживание на вилле 6 ночей </li>
            <li>Номер категории люкс</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 8 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li>Авиа перелет Тенерифе -Лансароте - Тенерифе</li>
            <li>Завтраки на вилле</li>
            <li class="services__item-num">950<sup>$</sup></li>
          </ul>
          <ul class="services__item">
            <li class="services__item-name">Профи</li>
            <li>Проживание на вилле 8 ночей</li>
            <li>Номер категории люкс</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 16 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li>Авиа перелет Тенерифе -Лансароте - Тенерифе </li>
            <li>Завтраки и ужины на вилле</li>
            <li class="services__item-num">1450<sup>$</sup></li>
          </ul>
        </div>


Источник

Ответы (2 шт):

Автор решения: rusgeli

vertical-align работает только в ячейках таблицы или если элемент имеет свойство display: table-cell, а родительский display: table, поэтому и не работает.

Есть вариант назначить каждому ul position: relative, а вашим ценам -- position: absolute и выровнять по низу

Например так:

.services__items{
  display: flex;
  justify-content: space-between;
}

ul.services__item{
  background-color: #fff;
  width: 360px;
  padding: 45px 30px;
  position: relative;
}

.services__item li{
  margin-bottom: 20px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.6px;
  color: #242121;
}

.services__item .services__item-name{
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  color: #01353E;
  margin-bottom: 58px;
}

.services__item .services__item-num{
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  color: #01353E;
  /* абсолютное позиционирование + выравнивание по низу */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.services__item-num sup{
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #01353E;
}
<div class="services__items">
          <ul class="services__item">
            <li class="services__item-name">Стандарт</li>
            <li>Проживание на вилле 6 ночей </li>
            <li>Номер категории стандарт</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 5 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li class="services__item-num">450<sup>$</sup></li>
          </ul>
          <ul class="services__item">
            <li class="services__item-name">Все включено</li>
            <li>Проживание на вилле 6 ночей </li>
            <li>Номер категории люкс</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 8 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li>Авиа перелет Тенерифе -Лансароте - Тенерифе</li>
            <li>Завтраки на вилле</li>
            <li class="services__item-num">950<sup>$</sup></li>
          </ul>
          <ul class="services__item">
            <li class="services__item-name">Профи</li>
            <li>Проживание на вилле 8 ночей</li>
            <li>Номер категории люкс</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 16 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li>Авиа перелет Тенерифе -Лансароте - Тенерифе </li>
            <li>Завтраки и ужины на вилле</li>
            <li class="services__item-num">1450<sup>$</sup></li>
          </ul>
        </div>

→ Ссылка
Автор решения: novvember

Что если сделать внутри карточки выравнивание через flex, а для цены задать верхний отступ?

.services__items{
  display: flex;
  justify-content: space-between;
}

ul.services__item{
  background-color: #fff;
  width: 360px;
  padding: 45px 30px;
  
  display: flex; /* Добавлено */
  flex-direction: column; /* Добавлено */
}

.services__item li{
  margin-bottom: 20px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.6px;
  color: #242121;
}

.services__item .services__item-name{
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  color: #01353E;
  margin-bottom: 58px;
}

.services__item .services__item-num{
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  color: #01353E;
  vertical-align: bottom;
}

.services__item-num sup{
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #01353E;
}

.services__item-num {
  margin-top: auto; /* Добавлено */

}
<div class="services__items">
          <ul class="services__item">
            <li class="services__item-name">Стандарт</li>
            <li>Проживание на вилле 6 ночей </li>
            <li>Номер категории стандарт</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 5 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li class="services__item-num">450<sup>$</sup></li>
          </ul>
          <ul class="services__item">
            <li class="services__item-name">Все включено</li>
            <li>Проживание на вилле 6 ночей </li>
            <li>Номер категории люкс</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 8 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li>Авиа перелет Тенерифе -Лансароте - Тенерифе</li>
            <li>Завтраки на вилле</li>
            <li class="services__item-num">950<sup>$</sup></li>
          </ul>
          <ul class="services__item">
            <li class="services__item-name">Профи</li>
            <li>Проживание на вилле 8 ночей</li>
            <li>Номер категории люкс</li>
            <li>Экипировка для обучения</li>
            <li>Обучение серфингу 16 тренировок по 2 часа</li>
            <li>Страховка</li>
            <li>Вечеринка с угощениями и дискотекой</li>
            <li>Авиа перелет Тенерифе -Лансароте - Тенерифе </li>
            <li>Завтраки и ужины на вилле</li>
            <li class="services__item-num">1450<sup>$</sup></li>
          </ul>
        </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.