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

Question

[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;
  }
}

Comments

[Алексей Струков]

Помести каждую пару картинок в отдельный див

Answer 1

[Миша]

Можно вот так:

.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

Comments

[rinatoptimus]

Забыл написать, что без flexbox.

[Миша]

rinatoptimus: добавил ещё один вариант.

[rinatoptimus]

Миша: К сожалению, если добавить текст под первым блоком, ломается: joxi.ru/DmBLoJZhwBqLoA

[Миша]

rinatoptimus: исправил пример и демку, теперь не ломается.

[rinatoptimus]

Миша: спасибо! Думал, придется таблицами изворачиваться.