Как сделать одинаковый отступ при разной высоте
Страницы: 1
Как сделать одинаковый отступ при разной высоте
Пробовал masonry, не подходит. Вроде на флексбокс где-то видел не помню. Нужно что бы блоки друг под другом были с одинаковым отступом.


https://codepen.io/serg-style/pen/PaLvMQ

Комплексное SEO продвижение в поисковых системах Яндекс, Google

Попробуй стили
Код
.app-box ul {
    padding: 30px 0;
    margin: 0;
    list-style: none;
}


Заменить на
Код
.app-box ul {
    padding: 30px 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
Самый быстрый хостинг на SSD. Месяц в подарок. Поддержка 24/7. Помощь в переезде.

Передовое сообщество веб-мастеров. Тебе к нам!
Артем Малков,

Спасибо!

Хотя не совсем то, блоки становятся одного размера на линии, и если текст в одну строку а следующий на 3 то получается промежуток https://codepen.io/serg-style/pen/PaLvMQ
Изменено: SergF - 4 Июля 2018 09:54
Если на чистом css, то нужно использовать свойство columns.Но тогда блоки будут выстраиваться по колонкам, а не по строкам.

Если сохранить порядок, то masonry. Если он конфликтует(что странно), то можно через цикл перебрать элементы, разбить на группы и раскидать по отдельным колонкам.
Александр,
Изначально эти ссылки находятся в скрытом блоке который выкатывается по клику, поэтому Masonry при загрузке страницы задает блоку height 0 и когда блок становится видимым высота остается 0 и ссылки сплюснуты в одну кучу.
попробуйте так:

Код
.app-box ul {
  padding: 0;
  margin: 30px 0;
  list-style: none;
  -moz-column-width: 220px;
  column-width: 220px;
}

.app-box ul li{
    padding: 5px 10px;
    margin: 10px;
    background: #ddd;
    page-break-inside: avoid;
    break-inside: avoid;
}
Артем Малков,

То что нужно, спасибо!
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
08:23 Как уберечь одностраничник 
07:56 Негативно ли влияют рекламные ссылки под статьей? 
05:29 Ссылки на мой сайт в первый месяц 
02:29 Индексация ?fbclid= яндексом 
21:52 Прибыльную и надежную партнёрку Perestroika Affiliates - в каждый дом! 
21:06 CPA-сеть MyLead - глобальная монетизация трафика! 
18:45 Проблема с посещаемостью, прошу совета 
01:21 Белый вывод сайта в топ Яндекса 
22:08 Продвину сайт качественными ссылками. Рост посещаемости, позиций и ИКС. Крауд ссылки недорого + скидки. 
17:39 Персональные прокси сервера http/https + socks5 
16:56 BestChange – обменивать электронную валюту можно быстро и выгодно 
16:54 Продам 1TB облако .. без ограничений по времени 
16:35 Идентификация Яндекс Деньги 
15:54 Восстанавливаю Целиком и Полностью сайты из Вебархива (Webarchive) 
05:25 Прошу помощи по составлению семитического ядра (взаимообмен) 
00:30 Фото наших рабочих мест. Не проходи мимо! 
00:13 Наши машинки 
22:51 Как я отдыхал в другой стране, видел много коров, коз и не одной улитки. 
17:01 Доска объявлений 
16:23 Партнёрская программа Купибилет — стабильный доход на туристическом рынке 
21:28 Цель: 100 000 руб. в месяц с 1-го канала на Яндекс Дзен © БЛОГ НЕ БЛОГЕРА