Несколько колонок контента

Обновлено 27.12.2016

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Подскажите, как можно реализовать несколько колонок контента?
Допустим, в первой колонке посты с одной рубрики, в другой — со второй, и так далее.

css шаблон

Beetroot

Оцените автора

Добавить комментарий

tiaurus 07.11.2012 в 12:45

Нужно переделывать используемую вами тему.

Ответить
1. Beetroot автор 07.11.2012 в 13:01
  
  А если с нуля?
  
  Ответить
  1. tiaurus 07.11.2012 в 13:15
    
    Что с нуля? Тему написать с нуля? Думаю, это в комментариях не объяснить. Откройте исходный код какой-нибудь простенькой темы и посмотрите, как там что устроено. Для начала изучите файлы, из которых может состоять тема, и их иерархию.
    
    Ответить

qazomardok 14.01.2013 в 17:16

5 колоночная верстка:

#b780.c{display:block;float:left;margin:0 9px 10px 10px}
#b780.l{display:block;float:left;margin:0 9px 10px 0}
#b460.c{display:table-cell;float:left;margin:0 9px 15px 10px;width:450px!important}
#b460.l{display:table-cell;float:left;margin:0 5px 15px 0}
#b140.l{display:table-cell;float:left;margin:0 9px 10px 0;padding:0 0 5px}
#b220.l{display:table-cell;float:left;margin:0 0 10px;padding:0 8px 5px 0}
#bo780.c{border-right:1px solid #ccc;display:block;float:left;margin:0 9px 10px 10px}
#bo780.cr{border-right:1px solid #ccc;display:block;float:right;margin:0 0 10px 10px}
#bo780.l{border-right:1px solid #ccc;display:block;float:left;margin:0 9px 10px 0}
#bo460.c{border-right:1px solid #ccc;display:table-cell;float:left;margin:0 9px 15px 10px;width:450px!important}
#bo460.l{border-right:1px solid #ccc;display:table-cell;float:left;margin:0 9px 15px 0;padding:0 9px 0 0}
#bo220.l{border-right:1px solid #ccc;display:table-cell;float:left;margin:0 0 10px;padding:0 8px 5px 0}
#bo140.l{border-right:1px solid #ccc;display:table-cell;float:left;margin:0 9px 10px 0;padding:0 0 5px}

Код, конечно не идеален, но свое дело делает. Создаем блоки по 140px и начинаем ими играть через вкладывание, сложение, прибивкой вправо-влево.
Например:

<div id="b300" class="l">создали колонку в 300px (2 раза по 140) и прилепили её влево
<div id="140px" class="l">создали колонку в 140px и прилепили её внутри слева</div>
<div id="140px" class="r">создали колонку в 140px и прилепили её внутри справа</div>
<div id="clear">выравниваем нижнюю границу (ну и что, что снизу могут появиться "висячки")</div>
</div>
<div id="b640" class="r">создали колонку в 640px и прилепили её вправо. Внутри здесь также мы можем хоть как играться блоками. Например зделать 140 слева, 140 справа и 300 посередине. А потом еще этот 300 поделить пополам по 140px</div>

Ответить

qazomardok 14.01.2013 в 17:19

Оговорился: это, конечно же 6-и колоночная верстка. Ну и забыл добавить — внутри блоков делай по отдельному Loop с запросом к нужной категории :)

Ответить