Разбить UL на несколько столбцов

0

Трудно извлечь код и опубликовать его здесь, поэтому я отправляю образец сайта, который демонстрирует мою проблему. Я думал об этом, и есть несколько способов решить эту проблему (модификация HTML, модификация CSS + HTML, модификация CSS + JS), но поскольку я являюсь n00b в веб-кодировании, я хочу знать, что такое лучший план атаки здесь.

В любом случае проблема:

Посмотрите здесь: http://321cart.com/sellya/

Откройте меню "Навигация по категориям", и вы получите следующее:

Изображение 174551

Все эти ссылки по категориям - это ul содержащие много li. Я хочу разбить список и развернуть список из нескольких столбцов, чтобы в одном столбце было всего 3 li. Вот пример того, что я хочу сделать:

Изображение 174551

Это то, что я хочу:

Изображение 174551

Это приведет к увеличению ширины меню (практически теоретически, в двух словах), но для меня это нормально. Я могу справиться с этим самостоятельно.

Есть несколько способов сделать это, но я бы предпочел, если есть способ сделать это, используя только модификацию CSS. Если нет, то, может быть, через CSS и модификацию JavaScript? Я хочу внести изменения в фактический HTML-код в качестве последнего средства, потому что это оригинальный код HTML Open Generation PHP, который я не хочу изменять.

Обратите внимание, что я попытался решить эту проблему самостоятельно, но это оказалось немного сложным. Поэтому не думайте, что я не пытался. Во-вторых, опубликовать это в JSFiddle было бы сложно, и он бы действительно не представил реальную проблему полностью, поэтому я размещаю ссылку на образец сайта.

Пожалуйста, посмотрите, ребята. Сайт: http://321cart.com/sellya/

Поэтому мне нужны ответы на эту проблему, которая меня озадачила.

РЕДАКТИРОВАТЬ:

Забыл указать это. В приведенном выше примере все ul имели более 3 li каждый, но в моем фактическом случае только несколько ul имеют более 3 li каждый, и я хочу только расширить их до 2 столбцов, а не 1, 2 или 3 li каждый.

Теги:

3 ответа

2

CSS3 представил столбцы, которые должны делать то, что вы хотите. Теоретически просто примените высоту и column-width к вашей ul. На практике вам может потребоваться использовать префиксы поставщиков по column-width, предоставляя вам -webkit-column-width, -moz-column-width и т.д. Попробуйте это.

Поделиться
0

Взгляни на это:

var $columns = $("#columns");
var $longlist = $("#longlist");
var columnscount = 3;

//calculate sigle column size
var columnsize = Math.ceil($("p", $longlist).size() / columnscount);

//iterate number of columns, take [columnsize] elements, move them to div#columns and wrap with div.column
for (var i = 0; i < columnscount; i++) {
    $("p:lt(" + columnsize + ")", $longlist).appendTo($columns).wrapAll("<div class='column'/>")
}

вам нужно будет добавить какое-то условие, чтобы избежать сокращения списка сокращений на 3 элемента.

и вот как это работает: http://jsfiddle.net/hGWjd/

Поделиться
0

Вы можете установить ширину внешних divs (те, у которых класс "span2" в предоставленной ссылке), примерно на 350px и установить ширину LI до 100px и директив float: left. Это самый простой подход, который вы можете использовать.

Поделиться
  • 0
    Мне нужно более умное решение, чем это. В приведенном мною примере все ul имели более 3 li каждый, но в моем случае только несколько ul имеют более 3 li , и я хочу расширить их только на 2 столбца, а не на один. будет 1, 2 или 3 li каждый.
  • 0
    В этом случае вы можете легко проверить количество LI на каждом UL, используя JS, и добавить класс CSS к тем, у которых более 3 LI, которые используют подход с плавающей точкой. Конечно, это одна из альтернатив.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню