Как поменять местами блоки в 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

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

Поддержка 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 руб

Отслеживать
ответ дан 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
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
круто! а что такое 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.

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

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

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

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

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

crazy_leo

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

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Регламент розміщення розширень
Регламент продажу та підтримки розширень
Віртуальний обліковий запис автора
Політика просування оголошень
API каталогу розширень
Вирішення спорів щодо авторських прав

Корисна інформація

Публічна оферта
Політика повернень
Політика конфіденційності
Платіжна політика
Політика передачі особистих даних
Політика прозорості

Останні розширення

Язык
Обратная связь

Движок интернет магазина OpenCart (ocStore) - официальный сайт OpenCartForum.com Powered by Invision Community

Уже зарегистрированы? Войти
Регистрация

Раздел покупок

ocStore

Назад
Официальный сайт
Демо ocStore 3.0.3.2
Демо ocStore 2.3.0.2.4
Скачать ocStore
Документация
История версий ocStore

Шаблоны

OpenCart.Pro

Создать.

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

Как поменять блоки местами на 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

CSS свойство order используется в контексте Flexbox и Grid Layout для управления порядком элементов внутри их контейнеров. Это свойство принимает целочисленные значения и определяет порядковый номер элемента в последовательности.

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

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