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

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

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

.price

20.170 руб 19.162 руб

Отслеживать
задан 3 мар 2016 в 9:19
4,488 6 6 золотых знаков 38 38 серебряных знаков 93 93 бронзовых знака
.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

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

Применяется к: дочернему элементу / 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 руб

Отслеживать
ответ дан 3 мар 2016 в 10:50
Kuat Mustafin Kuat Mustafin
692 4 4 серебряных знака 11 11 бронзовых знаков

.price < text-align: center; padding: 0 25px; display: block; >.price < direction: rtl; >.price > *

 20.170 руб 19.162 руб

Отслеживать
ответ дан 3 мар 2016 в 13:41
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
круто! а что такое direction: ltr; ?
3 мар 2016 в 14:15
@Вася, это направление письма right to left и left to right.
3 мар 2016 в 14:19

$("del").each(function()< var div = $(this).parent('div'); div.find('ins').insertBefore($(this)) >);

 dels = document.getElementsByTagName('del'); for (var i = 0; i < dels.length; i++) dels[i].parentNode.insertBefore(dels[i], dels[i].next);

Отслеживать
ответ дан 3 мар 2016 в 9:43
16.4k 2 2 золотых знака 15 15 серебряных знаков 24 24 бронзовых знака
подключать jQuery ради перемещения одного блока мне кажется нелогичным решением
3 мар 2016 в 9:54
не факт, что у него там этого jquery не полно уже 🙂
3 мар 2016 в 9:58
@lexxl вы знаете решение без скриптов? я весь во внимании
3 мар 2016 в 10:08
@splash58 если не будет другого решения без скрипта - я засчитаю ваше решение как правильное
3 мар 2016 в 10:10
написал в ответе вариант без jquery 🙂 там почти тоже самое
3 мар 2016 в 10:18

Если просто средствами css, то можно использовать flex, там revert делается в одну строку.

.price < display: flex; align-items: center; justify-content: center; flex-direction: row-reverse; //переставляет блоки в ряд //flex-direction: column-reverse; //переставляет блоки в столбик >

 20.170 руб 19.162 руб

Отслеживать
ответ дан 18 дек 2019 в 8:53
126 1 1 серебряный знак 4 4 бронзовых знака

html
css
css3

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

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

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

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

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

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

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

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

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

«Исследовать элемент»

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

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

Читать:

Как включить перевод страницы в opera gx

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

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

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

Итак, как поменять блоки местами на css без правки html и php или если называть все своими именами, то как переопределить порядок отображения элементов?

Сразу перейдем к делу, а воду будем лить потом!

Для того что бы определять порядок, используемый для размещения flex элементов в их flex контейнере, в CSS существует свойство order , вот собственно и все что вам надо!

Все же на всякий случай перейдем к практике и рассмотрим примеры которые собственно могут вам пригодится.

Пример использования свойства order в flexbox верстке

Предположим в нашем контейнере body есть два дочерних контейнера:

Контейнер main с основным содержанием сайта.
Контейнер aside т.е сайдбар нашего сайта с различными виджетами т.е меню, фильтры и.т.д.

Люди мы современные и естественно предполагаем, что верстаем применяя CSS3, а значит, как изначально сказано используем flexbox, т. е нашему тегу body мы задаем свойство display: flex , что делает все дочерние элементы flex элементами, выстроенными в ряд (по умолчанию flex-direction: row )

body

Теперь когда наши дочерние контейнеры стали flex элементами внутри flex контейнера мы можем задавать им свойство order , первым будет выводиться тот элемент у которого числовое значение меньше т. е, что бы поменять наши элементы местами нам нужно задать для main свойство order со значением 2, а для aside свойство order со значением 1 собственно вот и вся наука.

body main aside

Пример использования flex-direction: row-reverse

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

body

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

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

Как поменять местами itemsnew-list-item-wrapper с images_box-model-spec с помощью css (wrap, flex. ) ?
Сейчас у меня два блока в линию, левый поменять с правым.

Вопрос задан более трёх лет назад
16716 просмотров

1 комментарий

Простой 1 комментарий

crazy_leo