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


https://codepen.io/serg-style/pen/PaLvMQ
Попробуй стили
Код
.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)
Новые темыОбъявленияСвободное общение
13:53 AviTool - мощный инструмент для автоматизации работы с Avito 
17:01 Absence в Армении 
23:19 Ребята подскажите какими сервисами и прогами вы пользуетесь для SEO продвижения? 
19:30 Индексация страниц 
20:28 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
14:50 Какую выбрать тему/нишу для сайта? 
18:32 Gambling Craft - гемблинг по белому 
10:56 Современный скрипт обменника электронных валют 
10:27 BIGPROXY.SHOP - Резидентные Ротационные Backconnect Proxy USA EUROPA MIX [Безлимитный трафик] 
10:05 CactusPay.PRO | Умная платёжная система с выводом в USDT TRC-20 
04:06 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 
15:37 Продам обменник криптовалюты, а также новый обменник под ключ с обучением. Скидки на скрипты обменника 
15:03 PonyBit.ru - обменный пункт PonyBit.ru (Понибит.ру) 
13:25 Sova.gg - надежный обменник криптовалюты. 
10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 
20:17 Точные прогнозы на футбол 
12:23 150+ хакерских поисковых систем и инструментов 
08:38 Накрутка поисковых подсказок 
17:41 Стряхнуть обыденность - об Агасфере 
10:54 Добро пожаловать в цифровой мир... 
22:39 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор