Float li - одинаковый вертикальный отступ вместо наибольшего

378

24 ноября 2016, 10:09

Есть ul с такими стилями:

.li {
  float: left;
  margin-bottom: 10px;
}
.li:first {
  clear: both;
}

Проблема в том, что если какой-то из li занимает больше места по вертикали, чем другие в строке, то отступ для менее высоких будет равен 10px + разница их высоты с самым 'высоким'.

А что хотелось бы видеть:

Answer 1

В вашем случае нужно использовать библиотеку Masonry

Answer 2

Не знаю подойдёт ли, но это можно точно решить с помощью flexbox (вот здесь хорошая статья, возможно старовата)

Единственное: с поддержкой браузерами не всё гладко - только современные, а IE 11 вообще частично :(