INT 21h

Домашняя страница самого страшного прерывания

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

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

Оставьте ваш комментарий »

Форма отправки комментария

*

Разрешенные HTML-теги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

RSS RSS Feed только для этого поста |


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