Как правильно реализовать masonry на чистом CSS?

Question

[devel-avg]

Нужно сделать список районов Москвы.
Сейчас выглядит таким образом:

Не устраивает что заголовки групп остаются в предыдущем столбце.

стили:


Разметка:


Использую бутстрап 3.2

Answer 1

[Pretor DH]

Попробуй так изменить разметку:

...
      /* Добавим data-header="M" к .masonry-item*/
     <div class="col-lg-3 col-md-3 col-sm-3 col-xl-12 masonry-item" data-header="M">
          /* <li class="header">M</li>  Убрать из разметки*/ 
          ...
     </div>
     ...

В своем стиле сделать псевдо елемент :before :

.masonry-item[data-header]:before {
               content: attr(data-header);
               display: block;
               font-weight:bold;
          }

Как вариант можно скинуть data-header в первый li (не в li c класом header - его быть не должно), и поменять селектор на .masonry-item li[data-header]:before

P.S. В вопросе ставь код, а не скриншоты. Набирать наново лениво.

Comments

[devel-avg]

То что нужно! Спасибо!

[devel-avg]

Проверю ещё кроссбраузерность