INT 21h

Hi, I am Vladimir Smagin, sysadmin. Telegram Email

Верстка li в несколько столбцов на PHP

№ 5631 В разделе "Программирование" от November 4th, 2013,

Понадобилось мне сегодня сверстать страничку так, чтобы 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;
	  }

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

li_in_3_columns_with_php

Нет комментариев »

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Комментарии

  • 21h: нене ) без меня )
  • Серегй: Не совсем грабить)) если грабить можно и без рации, есть...
  • 21h: магазин грабить собрались? ) не, тут я не помощник ;)
  • Серегй: А что бы мне поймать чужую волну, что мне для этого нужно...
  • 21h: слушать никто не запрещает. нет закона, который запрещает...
  • Серегй: Я хотел узнать могу ли я просто прийти с данной рацией baofeng...
  • 21h: У меня есть только эти 2. По другим ничего не знаю. В интернете...

© Vladimir Smagin, 2005-2017. Копирование материалов без разрешения запрещено.
Яндекс.Метрика