INT 21h

Hi, I am Vladimir Smagin, SysAdmin and

Kaptain. Telegram Email / GIT / RSS / GPG

Верстка 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;
	  }

А вот полученый результат с правильной сортировкой