Не получается разбить список на 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
Колонки в смысле столбы в ширину?
Изменено: 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)
Новые темыОбъявленияСвободное общение
13:39 Стоит ли добавлять сайт в Rambler топ 100? 
13:53 AviTool - мощный инструмент для автоматизации работы с Avito 
17:01 Absence в Армении 
23:19 Ребята подскажите какими сервисами и прогами вы пользуетесь для SEO продвижения? 
19:30 Индексация страниц 
20:28 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
14:50 Какую выбрать тему/нишу для сайта? 
18:18 Cryptonet.pro - быстрый и надежный обмен электронных валют! 
16:44 TETChange-Обменник криптовалют 
13:59 Продам базу данных предприятий Украины, России, Великобритании, Германии, Испании, Италии, Нидерландов, Польши, Франции, Швейцарии и др. 
12:37 GoodsMoney.io 
12:28 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 
10:56 Современный скрипт обменника электронных валют 
10:27 BIGPROXY.SHOP - Резидентные Ротационные Backconnect Proxy USA EUROPA MIX [Безлимитный трафик] 
10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 
20:17 Точные прогнозы на футбол 
12:23 150+ хакерских поисковых систем и инструментов 
08:38 Накрутка поисковых подсказок 
17:41 Стряхнуть обыденность - об Агасфере 
10:54 Добро пожаловать в цифровой мир... 
22:39 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор