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

Как выровнять элементы в списке?

В списке с изображениями элементы смещаются по вертикали, если текста больше, чем в соседнем элементе: пример. Например, блок с картинкой Right 2 ниже, чем блок Left 2. Надо, чтоб в нижнем ряду элементы всегда были на одном уровне, независимо от количества текста. Как их выровнять без flexbox?

ul li {
  list-style: none;
}
.article-img-list {
  margin: 20px 0;
}


.left {
  float: left;
  width: 48%;
}
.right {
  float: right;
  width: 48%;
}
img {
  max-width: 100%;
  height: auto;
}
.group:after {
  content:"";
  display: table;
  clear: both;
}
@media screen and (max-width: 480px) {
  .left, .right {
    float: none;
    width: auto;
  }
}
  • Вопрос задан
  • 157 просмотров
Подписаться 2 Оценить 1 комментарий
Решения вопроса 1
hvdd
@hvdd
Кратко о себе
Можно вот так:
.left,
.right {
  float: left;
  width: 48%;
}

.left { margin-right: 2%; clear: left; }
.right { margin-left: 2%; clear: right; }

Демо на codepen


Можно с помощью flexbox:
ul {
  display: flex;
  flex-wrap: wrap;
}

li { width: 48%; }
.left { margin-right: 2%; }
.right { margin-left: 2%; }

Демо на codepen
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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