Задать вопрос
weranda
@weranda
php

Как автоматически организовать список UL LI в несколько колонок?

Приветствую.
Как можно сделать так, чтобы список UL LI был организован автоматически в несколько столбцов таким образом, чтобы каждый следующий элемент располагался под другим, а при достижении, к примеру, если имеется 30 записей и три столбца, 11 и 21 элемент списка располагались в следующем столбце?

В ручную создавать три списка UL нет смысла, так как он будет постоянно дополняться и постоянно переносить записи из одного столбца в - это заморочка.

Как надо:
1 11 21
2 12 22
3 13 23
4 14 24
5 15 25
6 16 26
7 17 27
8 18 28
9 19 29
10 20 30

Как не надо:
1 2 3
4 5 6
7 8 9
...
28 29 30
  • Вопрос задан
  • 5944 просмотра
Комментировать
Подписаться 9 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 5
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
@weranda я сначала написал Вам подробный ответ, потом удалил. В ответе я написал универсальный скрипт на jquery для разбития списка на колонки. Если хотите его получить, то просмотрите внимательно все Ваши вопросы и отметьте решением отвеченные вопросы (там точно есть несколько вопросов с решением) и скажите спасибо всем, кто отвечал. Что это такое, люди тратят время, а Вам спасибо лень сказать.
Соответственно призываю сообщество не отвечать автору, пока он не исправится.
Как только это произойдет — уберу данный опус и дам ответ на вопрос.
Ответ написан
Комментировать
Комментировать
nicothin
@nicothin
веб-разработчик с 2000 г.
вобще-то, это реализуемо средствами CSS: cssdeck.com/labs/full/xqivkd2k
поддержка в браузерах хорошая, а в Internet Explorer будет работать только начиная с 10й версии.
Ответ написан
Комментировать
Комментировать
@Golumenov
Из моего опыта: Одним списком дело не обойдется. Вам в любом случае придется формировать 3 списка, поскольку одним списком и средствами html+css такое сделать не получится.
Поэтому: Либо формируете 3 списка средствами php, либо отдаете на сайт один список и уже там формируете из этого списка 3 списка средствами javascript
Ответ написан
2 комментария
2 комментария
@Sowd
Не шарю в программировании....
Но как насчет такого варианта?
<table>
<tr>
<td>
<ul>
<?
for ($i = 1; $i <= 10; $i++) {
    echo '<li>'. $i .'</li>';
}

?>
</ul>
</td>
<td>
<ul>
<?

for ($i = 11; $i <= 20; $i++) {
    echo '<li>'. $i .'</li>';
}


?>
</ul>
</td>
<td>
<ul>
<?

for ($i = 21; $i <= 30; $i++) {
    echo '<li>'. $i .'</li>';
}


?>
</ul>
</td>
</tr>
</table>
Ответ написан
Комментировать
Комментировать
vladkens
@vladkens 
ul { list-style-type: none; display: inline-block; padding: 8px; }


<?php

function generateListTable($cols, $rows) {
    $rs = '';
    for ($i = 0; $i < $cols; ++$i) {
        $rs .= '<ul>';
        for ($j = 0; $j < $rows; ++$j) {
            $rs .= '<li>' . ($i * $rows + $j) . '</li>';
        }
        $rs .= '</ul>';
    }
    
    return $rs;
}

echo generateListTable(3, 10);
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
PHP разработчик
Ведисофт • Екатеринбург
от 25 000 ₽
PHP-разработчик
M-Social Production • Брянск
от 70 000 ₽
PHP-разработчик
FunPay
от 300 000 до 500 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Перекрасить 2 вкладыша в новый цвет
18 апр. 2024, в 11:36
300 руб./за проект
Разработать модуль на Python для создания bitcoin транзакций
18 апр. 2024, в 11:20
5000 руб./за проект
Доработать калькулятор, исправить ошибки (PHP, YII2) Часть 3
18 апр. 2024, в 11:12
8200 руб./за проект
Ещё заказы