Сведения о вопросе

Life

22:41, 2nd October, 2020

Теги

CSS    

Верстка ul/li в несколько колонок?

Просмотров: 218   Ответов: 13

Здравствуйте!


Появилась задача — разбить большой (ок. 100 элементов) список ul/li на несколько колонок. Но задача этим не заканчивается…

Нужно сделать не так:

1 2 3

4 5 6

7 8 9

А так:

1 4 7

2 5 8

3 6 9


Гугл не выдает секретов реализации того, что мне нужно — только первый вариант…

Подскажите, пожалуйста, реализацию.



  Сведения об ответе

DO__IT

12:19, 28th September, 2020

Еще можно придумать такое CCS3 решение:
li {
  float:left;
}
li:nth-child(3n+1) {
  clear:both;
}


  Сведения об ответе

FAriza

15:42, 27th September, 2020

Если список получается посредством массива, то не составляет труда разбить массив на 3 списка, и не нужно ничего чудить. Если статика, то просто верстаем три списка типа ul.


  Сведения об ответе

fo_I_K

13:29, 25th September, 2020

В css2 без js нереально


  Сведения об ответе

screen

04:35, 26th September, 2020

Вот вариант решения от студии Самизнаетекого: bit.ly/Cdsz8


  Сведения об ответе

FAriza

04:05, 29th September, 2020

jQuery: Разбить список на колонки (и мой коммент обязательно).


  Сведения об ответе

SKY

16:42, 30th September, 2020

  Сведения об ответе

dump

02:25, 28th September, 2020

может подойдет что-то типа kenneth.kufluk.com/google/js-columns/
code.google.com/p/js-columns/
нагуглил по «jquery newspaper layout»


  Сведения об ответе

PHPH

08:28, 27th September, 2020

Реально в css3, но поддерживается multi-column layout только в webkit и mozilla.


  Сведения об ответе

DAAA

04:01, 30th September, 2020

Если важна «валидность», то остаётся лишь разбить на три раздельных списка. Умный вариант — свободное использование DIV внутри UL, OL и DL — официально до сих пор не принят (хотя в браузерах работает): непосредственными потомками UL, увы, формально по-прежнему могут быть только LI.


  Сведения об ответе

FAriza

00:35, 25th September, 2020

На днях я такое реализовал в XSLT. Там тоже намучился. В чистом HTML нужен какой-то скрипт, иначе никак. Или с сервера динамически списки формировать правильно.


  Сведения об ответе

JUST___

01:10, 30th September, 2020

Дано ограничение по количеству строк или столбцов?

Сделать несложно с jQuery.


  Сведения об ответе

$DOLLAR

09:51, 25th September, 2020

Попробуйте использовать flex. Вот ссылочка на использование этой замечательной вещи. Ну и сверху решение хорошее, с использованием column.

Вот вам еще ништячек, можно просмотреть, что поддерживается и какими браузерами. Достаточно прописать название свойства в поиске.


  Сведения об ответе

lool

10:09, 27th September, 2020

Пользуюсь этим скриптом.


Ответить на вопрос

Чтобы ответить на вопрос вам нужно войти в систему или зарегистрироваться