Css поменять местами два блока

Перестановка блоков местами с помощью css, не используя скриптов

Задача: визуально поменять местами два блока, не переставляя их в исходном коде и не применяя javascript. Особенно это актуально в целях продвижения в поисковых системах. Перестановки двух типов: вертикальная и горизонтальная.

Для начала горизонтальная перестановка. Возьмем простой html.

div class="swap-hr"> span class="swap-hr__foot">[переместится вправо]span> span class="swap-hr__body">[останется в середине]span> span class="swap-hr__head">[переместится влево]span> div> 

Стили на основе банальных float.

.swap-hr  display: inline-block; > .swap-hr__body  float: right; > .swap-hr__head  float: left; > .swap-hr__foot  float: right; > 

Либо другой вариант с помощью волшебного flexbox.

.swap-hr  display: inline-flex; flex-direction: row-reverse; > 

до: [переместится вправо][останется в середине][переместится влево] после: [переместится влево][останется в середине][переместится вправо]

Для вертикальной перестановки возьмем аналогичный простой html.

div class="swap-vr"> span class="swap-vr__foot">[переместится вниз]span> span class="swap-vr__body">[останется в середине]span> span class="swap-vr__head">[переместится вверх]span> div> 

Можем переставить местами можно с помощью условно табличной верстки. Шапка таблицы всегда отображается вверху таблицы, а футер — внизу. Вот и используем для перестановки варианты свойства display : table , table-header-group , table-row-group и table-footer-group .

.swap-vr  border-collapse: collapse; border-spacing: 0; display: table; > .swap-vr__head  display: table-header-group; > .swap-vr__body  display: table-row-group; > .swap-vr__foot  display: table-footer-group; > 

Либо тот же волшебный flexbox.

.swap-vr  display: flex; flex-direction: column-reverse; > 

Результат в обоих случаях будет одинаковый.

до: после: [переместится вниз] [переместится вверх] [останется в середине] [останется в середине] [переместится вверх] [переместится вниз]

Вариант с flexbox, конечно, выигрывает. Изящный, гибкий, лаконичный. Но, к сожалению, частенько приходится учитывать старые браузеры, в которых он не поддерживается.

Источник

Как поменять блоки местами в CSS?

В сегодняшней статье вы узнаете, как можно менять блоки на сайте местами, при этом не внося никаких правок в HTML или PHP код. Для реализации данной задачи мы будем использовать всего несколько CSS-свойств.

Навигация по статье:

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

Меняем блоки местами при помощи float

Итак, давайте рассмотрим конкретный пример. Предположим у нас есть вот такая страница сайта:

На которой блок с контентом выводится с левой стороны, а сайтбар выводится с правой стороны. Давайте поменяем местами бок сайтбара и блок контента. Сделаем, что бы они у нас располагались наоборот.

Прежде чем приписывать какие-либо CSS-свойства для блоков, нам нужно вычислить класс или идентификатор, который они имеют.

1. Кликаем правой кнопкой по элементу, выбираем «Исследовать элемент» и далее инспектируем его код, что бы видеть какой класс или идентификатор присваивается этому элементу.

В данном случае наш элемент имеет два класса, класс content и класс fleft. Скорее всего, класс content имеет не только этот блок, но еще другие блоки на сайте. Поэтому я буду привязываться к классу fleft, потому, как он выглядит более уникалным.

По инспектированию кода и определению классов и идентификаторов элементов на сайте я делала отдельную статью, с которой вы можете ознакомиться по этой ссылке.

Мы видим код этого блока, и видим, что у него есть класс fright. Копируем его, и для него приписываем наоборот, обтекание по левому краю.

Вот так мы при помощи буквально нескольких строчек кода, очень быстро поменяли их местами.

Изменяем порядок отображения блоков

Теперь давайте рассмотрим еще один пример. Предположим у нас есть страница с вот такой структурой блоков:

Если мы захотим поменять местами блок с текстом и блок с изображением, нам достаточно будет использовать свойство float и задать ему значение left или right. Однако если мы будем адаптировать эту страницу под мобильные устройства, то увидим, что на маленьких экранах, после перестроения в одну колонку, у нас эти блоки выглядят не очень красиво.

У нас идет в первом блоке сначала изображение, а потом текст, во втором сначала текст, а потом изображение, в третьем опять наоборот. Было бы на много красивее и аккуратнее, если бы у нас и после перестроения все блоки выглядели одинаково.

Например, чтобы во всех блоках сначала была бы задана картинка, а затем текст.

При помощи CSS-свойства float мы уже ни как не можем повлиять здесь на порядок расположения элементов. Однако у нас есть еще одно CSS-свойство display:flex, которое поможет нам реализовать данную задачу.

CSS cвойство display:flex предназначено для гибкой компоновки дочерних элементов. Оно имеет много интересных возможностей, и очень активно используется в современной верстке. В ближайшее время я сделаю отдельную статью или видео, посвященное интересным возможностям и нюансам использования этого свойства.

Если в предыдущем примере мы задавали или изменяли CSS-свойство float конкретно для тех элементов, которые мы хотим поменять местами. То здесь нам нужно будет еще обращать внимание на родительские блоки этих элементов.

Предположим у нас есть блок, который имеет класс text-row, внутри этого блока находится еще два блока, это блок с изображением, и блок с текстом. Блок с изображением имеет класс image-block, а блок с текстом имеет класс description-block.

Наша задача задать для родительского блока тех элементов, которые мы хотим переставить местами, CSS-свойство display:flex и свойство flex-flow. В нашем случае это будет выглядеть вот таким образом:

Источник

Вертикальная пере­становка блоков средствами CSS

Автор: Марат Таналин Опубликовано: 2011-06-05 Обновлено: 2017-06-28 Краткое описание Кросс­браузерный способ полно­ценной вертикальной пере­становки блоков произвольной высоты средствами CSS.

Современные браузеры — Flexbox

Произвольный порядок

В современных браузерах (в том числе Internet Explorer 11 и Edge) управлять визуальным порядком элементов можно с помощью CSS-свойства order , являющегося частью механизма Flexbox . Блоки следуют в порядке возрастания значений свойства order . Значением свойства order должно быть целое число, которое может быть как положительным, так и отрицательным. Значение по умолчанию — 0 .

.example > .a /* Отобразится третьим */
.example > .b /* Отобразится вторым */
.example > .c /* Отобразится первым */

Объявление display: flex включает Flexbox для элемента-контейнера. Объявление flex-direction: column задаёт вывод дочерних элементов контейнера друг под другом вместо горизонтального вывода, используемого во Flexbox по умолчанию.

Вертикальное положение пере­упорядо­чиваемых блоков является взаимо­зависимым: увеличение высоты любого из блоков приводит к авто­мати­ческому вертикальному сдвигу визуально следующих за ним блоков, в том числе при динамическом изменении высоты блоков, например, вследствие увеличения размера шрифта средствами браузера.

Обратный порядок

Если требуется просто вывести элементы в обратном порядке, можно использовать объявление flex-direction: column-reverse для содержащего их контейнера без необходимости явно задавать расположение каждого элемента:

.example display: flex;
flex-direction: column-reverse;
>

Устаревшие браузеры — display: table

В браузерах, не поддерживающих Flexbox (IE 10 и ниже), вертикальный порядок следования блоков на HTML-странице можно изменить, придав им табличное представление при помощи CSS-свойств семейства display: table . Вне зависимости от порядка расположения блоков в HTML-коде, «шапка» ( display: table-header-group ) такой таблицы отображается в её верхней части, «подвал» ( table-footer-group ) — в нижней, а основная часть таблицы ( table-row-group ) — между ними.

.example display: table;
width: 100%;
>

.example > .a /* Отобразится внизу псевдотаблицы */
.example > .b /* Отобразится посередине */
.example > .c /* Отобразится вверху */

Описанным образом можно изменять порядок до трёх соседних блоков. Дополнительно можно задействовать display: table-caption (отображение блока в роли подписи к таблице) в сочетании с CSS-свойством caption-side со значением top или bottom .

Метод работает в большинстве распространённых браузеров, в том числе в Internet Explorer начиная с версии 9 (IE8 — с оговорками, см. далее).

Internet Explorer 6, 7 и 8 — DOM

Устаревшие браузеры IE6 и IE7 не поддерживают CSS-свойства семейства display: table* .

Кроме того, в IE8 в некоторых случаях наблюдается динамическая ошибка рендеринга: если перемещаемый блок содержит в себе псевдотабличные элементы ( display: table* ) (проявление нюанса замечено только в этом случае), возможно спонтанное пропадание некорых ячеек (всегда разных и в разном количестве) псевдотаблицы при первичной отрисовке страницы.

Поэтому для IE8 и ниже можно отменить CSS-правила, придающие блокам табличный вид, и дополнительно переместить блоки в нужные позиции DOM-дерева HTML-документа уже с помощью JavaScript:

/**
* Перестраивает соседние элементы в DOM-дереве в заданном порядке.
* @param elems Соседние элементы в необходимом порядке.
*/
function reorderElements(elems) // http://tanalin.com/articles/css-block-order/
var count = elems.length;

var parent = elems[0].parentNode;

for (var i = count — 1; i >= 0; i—) parent.insertBefore(elems[i], parent.firstChild);
>
>

Определение возможностей браузера

Использовать разные стили для современных и устаревших браузеров можно путём определения возможностей браузера средствами JavaScript.

Определить, поддерживает ли браузер Flexbox, можно путём проверки существования свойства order объекта, доступного через свойство style корневого элемента документа ( ) — document.documentElement .

Версию Internet Explorer можно определить путём проверки существования нестандартного объекта document.all , доступного только в IE 10 и ниже, в сочетании с существованием или отсутствием одного из стандартных объектов.

if (‘order’ in document.documentElement.style) // Flexbox-совместимый браузер.
// Используем `order` или `flex-direction: column-reverse`.
>
else if (document.all && !document.addEventListener) // IE8 или ниже.
// Изменяем реальный порядок блоков в DOM-дереве средствами JS.
>
else // Браузер без поддержки Flexbox, в том числе IE 9/10.
// Используем `display: table`.
>

Перепечатка любых материалов сайта в любом объёме запрещена

Источник

Как поменять местами блоки в CSS (горизонтальные и вертикальные)

Поговорим о том, как поменять местами горизонтальные и вертикальные блоки в CSS.

Очень часто макет странички содержит сайдбар справа и основное содержимое слева. Однако для раскрутки лучше, чтобы заголовки и значимая информация шли как можно раньше в коде. Из-за этого возникает необходимость визуального изменения последовательности элементов.

Поменять местами две колонки совсем несложно, для этого нужно отправляемой направо первой колонке добавить в CSS ‘float: right’, а если сайт сверстан на Bootstrap, то ей достаточно добавить класс «pull-right». Простенький примерчик.

Но как же быть, если необходима вертикальная перестановка блоков?

На самом деле даже для такой цели есть почти кроссбраузерный способ. А поможет в этом табличное представление блоков.
Блоку, обрамляющему всю конструкцию, нужно добавить «display: table», а внутренним блокам следующие «табличные» свойства:

• display: table-header-group – блоку, который должен быть выше всех;
• display: table-row-group – блоку, который будет идти посередине;
• display: table-footer-group – самому нижнему блоку.

Стоит отметить, что у внутренних блоков не будет работать margin, поэтому если нужно сделать отступ, до к родительскому блоку добавляется border-spacing (см. пример.)

Таким образом блоки будут переставлены вертикально, это бывает полезно, например, для отображения фильтров, навигации и т.д. наверху. Этот способ поддерживают практически все современные браузеры. Если необходима поддержка устаревших IE 6, 7 и 8, нужно добавлять javascript для перестановки блоков — эти версии браузера не понимают свойство «display: table».

Источник