Как поменять блоки местами в css
Перейти к содержимому

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

  • автор:

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

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

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

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

  • Меняем блоки местами при помощи float
  • Изменяем порядок отображения блоков
  • Видеоинструкция

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

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

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

Пример страницы

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

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

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

Инспектируем код

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

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

float : right ;

Определяем класс блока

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

float : left ;

Поменять блоки местами

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

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

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

Пример структуры блоков

Если мы захотим поменять местами блок с текстом и блок с изображением, нам достаточно будет использовать свойство 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. В нашем случае это будет выглядеть вот таким образом:

Как поменять порядок div блоков в мобильной версии за счет css

543

Сегодня, создавая сайт, грамотный разработчик сразу задумывается о его мобильной версии. Очень часто бывает, что в ПК блоки нужно расположить одним образом, а в телефоне поменять местами.

Например, посмотрите на картинку верстки ниже. Здесь используется верстка через float: left для картинки и текста с кнопкой в обоих блоках.

0

Теперь, если мы уменьшим экран, то картинка дома внизу станет не в нужном месте. Так как в структуре она стоит первой.

А нам нужно достичь такого результата (т.е. поменять местами блок с текстом и картинкой)

Делается это очень просто через display: flex и order . Чтобы проще было понять идею, рассмотрим такую структуру:

Если вы запустите этот пример на своем сайте, то увидите, что последний блок стал первым, предпоследний — вторым и т.д. Чтобы менять порядок блоков мы используем свойство order с указанием порядкового номера блока. Заметьте, счет идет с нуля. Родительскому элементу назначили display: flex; flex-flow: wrap; чтобы можно было сортировать его потомков.

Таким образом при ширине экрана, например, меньшей 768px мы легко можем добавить свойство display: flex; и менять порядок любых html элементов, как нам вздумается.

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

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

Есть резиновый блок со старой(зачеркнутой) и новой ценой. Как поменять цены местами, чтобы сначала была новая, а потом старая без правки html , чтобы блоки оставались резиновыми и по располагались по центру страницы? фидл

.price
20.170 руб 19.162 руб

Отслеживать
задан 3 мар 2016 в 9:19
4,480 6 6 золотых знаков 40 40 серебряных знаков 95 95 бронзовых знаков
.price > del < float: right; >
3 мар 2016 в 9:24
@soledar10 а результат вы видели? я же пишу — надписи должны быть точно также по центру
3 мар 2016 в 10:07
вот пример — jsfiddle.net/soledar10/fbrmzmkc
3 мар 2016 в 11:59
@soledar10 оу, а вот это супер — спасибо!
3 мар 2016 в 12:08

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Поддержка FlexBox

Применяется к: дочернему элементу / flex-элементу.

По умолчанию flex-элементы располагаются в исходном порядке. Тем не менее, свойство order может управлять порядком их расположения в контейнере.

.price < display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding: 0 25px; >.price ins < -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; >.price del
 
20.170 руб 19.162 руб
* < box-sizing: border-box; >.price < display: block; padding: 0 25px; >.price ins < float: left; width: 50%; text-align: right; padding: 0 25px; >.price del
 
20.170 руб 19.162 руб

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

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

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

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

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

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

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

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

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

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

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *