INT 21h
Верстка li в несколько столбцов на PHP
№ 5631 В разделе "Programming"
от November 4th, 2013,
В подшивках: PHP
Понадобилось мне сегодня сверстать страничку так, чтобы li укладывались в 3 столбца, но по газетному типу, а не по ебанутому как значки в панели управления Windows 7. Существующие методы на CSS и JavaScript меня совсем не впечатлили и поэтому я занялся созданием собственного велосипеда.
Итак, формулирую задачу:
– разбивка на 3 столбца
– газетная верстка
– примерно одинаковое количество строк во всех столбцах
Конечно, это не вегда удобно, если у вас сотни строк в массиве, ведь это ж какая портянка получится… Придется 2 раза прыгать в начало страницы, чтобы продолжить читать элементы списка. В этом случае можно обойтись CSS, который раскидывает элементы иначе и этот способ тут не рассматривается, т.к. его уже стопицот раз рассмотрели на других сайтах.
Код получился до отупения простой с несколькими счетчиками
<div id="binds">
<?
$rows=ceil(count($binds)/3);
$rows_cnt=$rows;
$cnt=count($binds);
foreach($binds as $bind) {
if ($rows_cnt==$rows) echo "<ul>";
echo "<li><a href='".
base_url('/tags/'.$bind->tags)."'>".$bind->name.
"</a><sup>".$bind->weight."</sup></li>\n";
$rows_cnt--;
$cnt--;
if ($rows_cnt==0 or $cnt==0 ) echo "</ul>\n\n";
if ($rows_cnt==0) $rows_cnt=$rows;
}?>
</div>
Разберемся что за переменные здесь учавствуют. $binds содержит в себе массив объектов, полученых из базы данных и который надо показать пользователю. Необходимо разделить это количество на 3 (колонок же 3 делаем, да?) и получить количество строк, огруглив результат в большую сторону. Ну а дальше тупой перебор и писование htmlом по парсеру браузера.
Теперь у нас 3 раздельных списка, которые без нужного CSS рисуются тупо один за другим. Добавляем CSS в стили…
#binds { float:none; }
#binds ol, #binds ul {
float:left;
width:33%;
margin:0px;
padding:0px;
list-style:none;
margin-bottom:1em;
}
#binds li {
margin:0px;
padding:0px;
}
А вот полученый результат с правильной сортировкой
Последние записи
Комментарии
Микроблог перейти
© Vladimir Smagin, 2005-2021. Копирование материалов без разрешения запрещено. GPG DA4CD0F5E222EA727D6A40C413BCE12E5618F071 *
Fortune cookie: Asked a supplicant priest of the pontiff, "Do I sin if I do what I want, if I screw a young nun In the eastertide sun?" His holiness murmured, "Gut yontiff."
Leave a Reply