Не получается разбить список на 4 не равномерных колонки

Сообщений: 401 Регистрация: Окт 2012

6 Ноября 2020 00:00

Есть простой список (меню), его нужно разбить на 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

Сообщений: 5425 Регистрация: Янв 2014

6 Ноября 2020 00:22

Колонки в смысле столбы в ширину?

Изменено: sharkson - 6 Ноября 2020 00:24

НАДЕЖНЫЙ И НЕДОРОГОЙ ХОСТИНГ ТУТ
НЕДОРОГОЙ ХОСТИНГ
ПРОДАМ БЛОГ ЖЖ
СОЗДАНИЕ И НАСТРОЙКА MediaWiki и phpbb3

Eye

Сообщений: 22717 Регистрация: Май 2011

6 Ноября 2020 00:33

Цитата
Chmil пишет: как реализовать такой пример на css

ну не меняя верстки только через css - это целый геморрой, но разделить их стилями можно через псевдо-класс nth-child применительно к каждому элементу и задавая индивидуальные относительные позиции.

Мы не можем похвастаться мудростью глаз
И умелыми жестами рук,
Нам не нужно все это, чтобы друг друга понять.
Сигареты в руках, чай на столе - так замыкается круг,
И вдруг нам становится страшно что-то менять.

sharkson

Сообщений: 5425 Регистрация: Янв 2014

6 Ноября 2020 00:38

Проще разбить на группы строк в высоту.

Chmil

Сообщений: 401 Регистрация: Окт 2012

6 Ноября 2020 22:21

предложили на другом форуме такой вариант https://codepen.io/chmil/pen/ExyeWNP но я не понимаю как регулировать количество пунктов в столбце, пробую разные варианты и постоянно пропуски выходят, да еще и за екран вправо вылазят пункты

Федя

Сообщений: 1039 Регистрация: Ноя 2019

6 Ноября 2020 22:51

Вот так пойдёт https://codepen.io/pen/?template=rNLZwJP

Изменено: Федя - 6 Ноября 2020 22:52

Eye

Сообщений: 22717 Регистрация: Май 2011

6 Ноября 2020 22:58

Цитата
Chmil пишет: как регулировать количество пунктов в столбце

через номер в псевдоклассе nth-child. Это breakpoint.

Цитата
Chmil пишет: да еще и за екран вправо вылазят пункты

укажите flex-wrap: wrap;

Chmil

Сообщений: 401 Регистрация: Окт 2012

6 Ноября 2020 23:20

Федя, вы просто поделили список на 4 равномерных колонки, а мне нужно "разбить список на 4 не равномерных колонки" smile:)

Oleg

Сообщений: 7 Регистрация: Сен 2013

6 Ноября 2020 23:35

С помощью только одного CSS такое не сделать

bee1roly1a Сообщений: 1 Регистрация: Ноя 2020	#10 29 Ноября 2020 16:54 только через css не надо !

10.05.2015 17:27	Не получается сделать выпадающее горизонтальное меню
12.04.2014 11:59	Помогите ! Не получается в ps сохранить графику в наилучшем качестве !
09.08.2013 02:01	Не получается с javascript, помогите
25.10.2012 21:17	Label не получается поставить

Новые темы	Объявления	Свободное общение
00:12 XEvil - софт для разгадывания капчи. Бесплатная демо-версия. Привязка к SEO/SMM-софту. 23:11 APK на паузе. Google убивает быстрый конверт 16:58 MAX попер в бурж: 40 стран, ведение каналов и горы дешевого трафика 15:38 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 15:09 А+ в MAX: Квитанция на получение денег 17:45 AviTool - мощный инструмент для автоматизации работы с Avito 15:31 adsense в 2026: кто реально выводит копейку через киргизию?	13:23 Trustpilot Reviews \| Подниму рейтинг вашей компании 13:22 №1 Рассылка / Инвайтинг [TELEGRAM] \| Приватный метод 13:22 Продвижение YouTube видео в топ поиска \| Любой тип контента \| Гарантия результата 13:21 Установка\|Настройка\|Доработка\|Наполнение сайтов\|Дизайн\|3D\|Видеомонтаж 10:25 Мониторинг обменников Сrypto-scout.io 08:28 Monitex: Мониторинг с кэшбэком 80% в USDT 02:29 Продам обменник криптовалюты, а также новый обменник под ключ с обучением. Скидки на скрипты обменника	13:53 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 13:50 Панель Кнопки соцсетей 13:04 молодильные яблоки и живая вода 06:03 Точные прогнозы на футбол 22:52 С юмором по жизни! 15:29 Компьютерная мышь 12:46 Актуально для тех кто хочет заработать в интернете