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

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

стили:
d9623ce9c5045bfe6201ad29c70c3c15.png

Разметка:
e94105478ef24729dff67882a1f5c45d.png

Использую бутстрап 3.2
  • Вопрос задан
  • 563 просмотра
Решения вопроса 1
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
Попробуй так изменить разметку:
...
      /* Добавим 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. В вопросе ставь код, а не скриншоты. Набирать наново лениво.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы