Перемещение div снизу вверх, используя только CSS

0

У меня есть что-то вроде этого: http://jsfiddle.net/my5La/

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

Теперь я хотел бы переместить зеленый (третий) прямоугольник между первым и вторым div. И мне нужно, чтобы они вошли между этими двумя, точно так же, как это было там, в первую очередь (так что второй прямоугольник будет двигаться вниз, а зеленый - вверх).

Теперь, возможно ли это, когда первая высота прямоугольника меняется? Если нет, возможно ли вообще?

Мне нужно это, потому что google adsense говорит, что первое объявление в html оплачивает больше всего, поэтому мне нужно, чтобы мое основное объявление было в нижней части страницы, так как оно не получает столько кликов, сколько другое объявление на моем сайте (и затем переместите его назад, предпочтительно только с помощью css).

Теги:

3 ответа

1
Лучший ответ

Вы можете изменить порядок элементов, используя order свойства макета Flexbox:

/* flexbox on body or any other wrapper */
body {
    display: flex;
    flex-direction: column;
}

#first,
#third {
    order: -1;
}

Демо: http://jsfiddle.net/my5La/2/

Но, как и другие, я советую вам подчиняться Google AdSense ToS.

Поделиться
  • 0
    Но они (Google) в основном говорят мне сделать это - на страницах справки они говорят, что первое объявление в коде является наиболее прибыльным, поэтому они советуют перемещать неосновную рекламу внизу страницы ...
1

Выполнение этого с помощью CSS трудно невозможно без фиксированной высоты div.

Вы можете использовать jQuery insertBefore или insertAfter:

$("#third").insertBefore($("#second"));

jsFiddle

РЕДАКТИРОВАТЬ

Переопределение объявлений является нарушением политики Google AdSense

Поделиться
  • 0
    Не могли бы вы процитировать точный абзац, который запрещает переупорядочение? Потому что я не нашел ничего по этой ссылке.
  • 1
    «Правила нашей программы не допускают каких-либо изменений в коде AdSense, которые искусственно повышают эффективность рекламы или наносят ущерб конверсиям рекламодателей».
-1

поскольку они имеют одинаковую форму и размер, вы можете просто изменить цвет, придавая иллюзию, что позиция div изменилась. Кажется намного легче сделать это, чем перемещать фактические элементы HTML.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню