1 Bopo6eu (31.10.2012 15:19 отредактировано Bopo6eu)

  • Bopo6eu
  • Я тут новенький
  • Карма: 0 / 0

Тема: Нестандартный вывод анонсов на главной странице WordPress

Создаю сайт на WP, хотелось бы чтоб на главной анонсы выводились нестандартно. Знаю что такое возможно, но сколько сам не бился ничего не выходит.
Хотелось бы чтоб анонсы выводились по принципу 1 новость во всю ширину, 2 и 3 пополам, 4 опять вовсю и так далее.
Помогите воплотить.

2 selenii

  • selenii
  • Чув-а-а-а-к!!!
  • Карма: 0 / 0

Re: Нестандартный вывод анонсов на главной странице WordPress

как раз вот это искал... но и здесь никто не помог..

3 KEFIR (17.07.2013 20:40 отредактировано KEFIR)

  • KEFIR
  • Status praesens
  • Карма: 14 / 0

Re: Нестандартный вывод анонсов на главной странице WordPress

Хех...платил бы мне еще кто за это...

Для начала нужно понять что за супер-структуру ты решил сделать....

Вроде так хочешь.... предлагаю алгоритм...желтые блоки выравниваются по левому краю с шириной 50% красные 50% по правому синие без выравнивания шириной 100%

Задавать класс каждому блоку нерационально.... Для решения твоих проблем нужно использовать псевдокласс nth-of-type: работает от только в css3 так что про старые версии прошу не писать ниже. В этот псевдокласс можно подставить формулу для высчитывания любого порядкового номера в дереве элементов. осталось эти формулы найти. Простые задачки школы, слава богу в школе я учился на 5 по математике. Но чтобы мозги не кисли предлагаю всем поучаствовать.

Задача 1: Вывести формулу находящую все порядковые числа ЖЕЛТЫХ блоков на картинке
Задача 2: Вывести формулу находящую все порядковые числа КРАСНЫХ блоков на картинке
Задача 3: Вывести формулу находящую все порядковые числа СИНИХ блоков на картинке

+ решение

Уже сдаешься? А подумать??

+ Решение

1)3n+1
2)3n-1
3)3n
Где n счетчик от 0++

+ CSS

Теперь применяем эти формулы к css будет что-то типа этого...похоже я только что изобрел велосипед

    div:nth-of-type(3n+1) {width:50%;float:left;}
    div:nth-of-type(3n-1) {width:50%;float:right;}
    div:nth-of-type(3n) {width:100%;float:none;clear:both}