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

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

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

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

CAPTCHA
*

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

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


Комментарии
  • Игорь: Все настроил, еще раз просмотрел видео и методом научного тыка все настроил и сохранил, все работает и обе...
  • 21h: Здравствуйте, Игорь! Я не знаю :) Думаю аналогично согласно инструкции к вашей радиостанции.
  • Игорь: Добрый день, просмотрел Ваше видео все доступно и ясно для 8 ми канальных радеек, но мне нада настроить 69...
  • Гоги: Есть инструкция к Моторолкам – она подходит к серии Motorola TLKR T4… Т8. В конце сетка частот и...
  • 21h: торчок давно уже не обновлял, как только закрыл сайт где он работал. да, это морда для opentracker. без...
  • Buter: Какова дальнейшая жизнь торчка? Он кстати веб-интерфейсом для OpenTracker выступает? Без OpenTracker работать...
  • 21h: понятия не имею. гуглите инструкцию к вашей радейке и сверяйтесь с ней.
  • Денис: хочу их подружить с uv5r
  • Денис: t-388 walkie talkie на эти шпаргалочек нет,или как приминить ваши к их настройке?
  • John: Стекла для электроник – техночас.ру