Не получается разбить список на 4 не равномерных колонки
Страницы: 1
Не получается разбить список на 4 не равномерных колонки
Есть простой список (меню), его нужно разбить на 4 не равномерных колонки, никак немогу решить ету задачу.


Код
<ul class="sub-menu">
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 1</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 2</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 3</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 4</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 5</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 6</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 7</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 8</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 9</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 10</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 11</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 12</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 13</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 14</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 15</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 16</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 17</a></li>
    <li id="menu-item" class="menu-item-type"><a href="http://........">Пункт 18</a></li>
</ul> 


Нужно примерно добиться такого результата (с лева на право):
Колонка 1 - пункты меню с 1 до 6
Колонка 2 - пункты меню с 7 до 10
Колонка 3 - пункты меню с 11 до 13
Колонка 4 - пункты меню с 14 до 18

Целый день сегодня пробую разные варианты, и ничего не хочет работать, помогите пожалуйста если есть какие-то идеи как реализовать такой пример на css
Изменено: Chmil - 6 Ноября 2020 00:00

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

Колонки в смысле столбы в ширину?
Изменено: sharkson - 6 Ноября 2020 00:24
Цитата
Chmil пишет:
как реализовать такой пример на css
ну не меняя верстки только через css - это целый геморрой, но разделить их стилями можно через псевдо-класс nth-child применительно к каждому элементу и задавая индивидуальные относительные позиции.
Мы не можем похвастаться мудростью глаз
И умелыми жестами рук,
Нам не нужно все это, чтобы друг друга понять.
Сигареты в руках, чай на столе - так замыкается круг,
И вдруг нам становится страшно что-то менять.
Проще разбить на группы строк в высоту.
предложили на другом форуме такой вариант https://codepen.io/chmil/pen/ExyeWNP но я не понимаю как регулировать количество пунктов в столбце, пробую разные варианты и постоянно пропуски выходят, да еще и за екран вправо вылазят пункты
Вот так пойдёт https://codepen.io/pen/?template=rNLZwJP
Изменено: Федя - 6 Ноября 2020 22:52
Цитата
Chmil пишет:
как регулировать количество пунктов в столбце
через номер в псевдоклассе nth-child. Это breakpoint.
Цитата
Chmil пишет:
да еще и за екран вправо вылазят пункты
укажите flex-wrap: wrap;
Федя, вы просто поделили список на 4 равномерных колонки, а мне нужно "разбить список на 4 не равномерных колонки"smile:)
С помощью только одного CSS такое не сделать
только через css  не надо !smile:mad:
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
01:55 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
00:39 Вопрос по keywords 
21:58 Выдача 28.07.2021 | Есть успехи? 
14:50 Golden Goose - WAP Click партнерка с inhouse офферами 
13:31 Букварикс: бесплатная программа для быстрого поиска ключевых слов 
13:15 [b]Webvork [/b]- международная товарная СРА сеть с сертифицированными офферами на Европу. 
12:21 Пассивный доход с Bitality.cc 
05:58 WVT-bot (БУМА) - автоматизация мессенджеров ANDROID 
17:00 C1k: обмен Advcash , Perfect Money , skrill , NETELLER, крипта, приват24, тенге 
14:39 SKACPA.RU — прямой рекламодатель по белой физической товарке и нутре 
12:19 Bitality.cc - обменник электронных валют 
11:20 Obama.ru - безопасный обмен криптовалют и электронных денежных средств 
11:00 Рерайт 10р/1к 
10:38 Продаю разные домены по 50руб 
21:40 Осторожно кидалово, svk-native.ru не платит партнерам 
21:35 Кто работал с SVK-Native? Поделитесь опытом, деньги предлагают не плохие, но отзывы негативные? 
19:59 Ищу быстрый пф который загоняет в топ за 24-48 часов 
09:23 Приглашай друзей на Binance и получайте по 25$ и другие призы 
19:27 Кто монетизирует сайты пушами? Как сейчас обстоят дела? 
19:48 Монетизация адалт трафика 
22:38 В Сочи на пляже выставили цену в 800 рублей за спасение утопающих