Как поменять блоки местами?
Как поменять местами itemsnew-list-item-wrapper с images_box-model-spec с помощью css (wrap, flex. ) ?
Сейчас у меня два блока в линию, левый поменять с правым.
- Вопрос задан более трёх лет назад
- 16447 просмотров
1 комментарий
Простой 1 комментарий
Как поменять местами блоки в 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».
Как поменять блоки местами без правки html?
Есть резиновый блок со старой(зачеркнутой) и новой ценой. Как поменять цены местами, чтобы сначала была новая, а потом старая без правки html , чтобы блоки оставались резиновыми и по располагались по центру страницы? фидл
.price
20.170 руб 19.162 руб Отслеживать
задан 3 мар 2016 в 9:19
4,488 6 6 золотых знаков 38 38 серебряных знаков 92 92 бронзовых знака
.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 серебряных знака 297 297 бронзовых знаков
круто! а что такое 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.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Поменять блоки местами в мобильной версии
Подскажите как поменять местами в мобильной версии левое меню и центральную часть (товары)?
здесь http://novsight.ru/svetodiodnye-lampy/
чтобы фильтр и меню категорий в мобильной версии не перемещались вниз, а были над товаром
Поиск как-то дельного ответа не дал
Добавлено через 16 минут
вот есть аналогичный шаблон http://obest.org/opencart/port. ry&path=25 здесь все как нужно. Пыталась перенести какие-то push и pull но ни чего так и не получилось
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Скрыть лишние блоки в мобильной версии
Макет адаптивной страницы имеет такой код: <div <div><p>Левый блок</p> .
В мобильной версии блоки с изображениями превращаются в карусель на Bootstrap
Помогите решить задачку: Верстка на Bootstrap. В строке 2 изображения. <div.
Разместить блоки в один ряд для мобильной версии
Всем привет, ребят подскажите как сделать. Есть сайт http://www.tekomod.com/ (не реклама) есть.
Поменять блоки местами
Всем доброго времени суток! Задача: поменять блоки местами (левый блок, чтобы был справа, правый -.
1663 / 840 / 342
Регистрация: 26.11.2014
Сообщений: 1,718
Записей в блоге: 1
У вас в 839-й строчке html файла див. В нём ещё два дива. Попробуйте эти два дива поменять местами друг с другом.
Регистрация: 07.05.2013
Сообщений: 194
Сообщение от NTHing 
У вас в 839-й строчке html файла див. В нём ещё два дива. Попробуйте эти два дива поменять местами друг с другом.
в 839 строчке там вообще не див. К сожалению, не пойму о чем вы говорите. И потом, если дивы просто поменять местами, они и в дисктопной версии поменяются же.
Регистрация: 07.05.2013
Сообщений: 194
вы эти дивы имеете ввиду?
0
1663 / 840 / 342
Регистрация: 26.11.2014
Сообщений: 1,718
Записей в блоге: 1
Да, эти блоки. Мог ошибиться с номером строки. Вы же код не выкладываете сюда. Приходится проводить дополнительные манипуляции, чтобы вам же помочь.) Попробовали?
Регистрация: 07.05.2013
Сообщений: 194
зачем его выкладывать, если он вот view-source:http://novsight.ru/svetodiodnye-lampy/
просто поменять местами не достаточно. Поскольку в дисктопной версии все так же измениться. Нужны еще правки css
Регистрация: 07.05.2013
Сообщений: 194
ни кто ни чего не подскажет?
можно как-то без особых сложностей это сделать?
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
angiks, я правильно понимаю, вы хотите чтоб блок с фильтрами была над товарами в каталоге?
Регистрация: 07.05.2013
Сообщений: 194
да. нужно фильтр поднять наверх, над товарами и рекомендуемыми в мобильной версии
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
Сообщение было отмечено angiks как решение
Решение
angiks, вставьте этот блок кода куда нибудь в конец файла /catalog/view/theme/porto/css/stylesheet.css
1 2 3 4 5 6
@media all and (max-width: 576px) { body[class*="product-category-"].skin11new .main-content .pattern > .container > .row { display: flex; flex-direction: column-reverse; } }
Регистрация: 07.05.2013
Сообщений: 194
огроменное вам спасибо
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Поменять блоки местами в Bootstrap
Ни как не могу поменять в мобильной версии левую колонку и содержимое блока контент местами. Нужно.
Как поменять блоки местами
Здравствуйте уважаемые знатоки) Возможно, я создал вопрос не в той ветке, т.к. эта проблема скорее.
Как поменять блоки местами
Оптимизаторы утверждают, что контент, находящийся в начале кода страницы, для поисковиков важнее.
Поменять блоки местами bootstrap
Поменять 1 и 4 блоки местами при уменьшении до xs. Через push не получается. Код: <div.
Поменять местами блоки Div
Доброго времени суток! Помогите решить одну задачу: Есть таблица построенная из блоков Div .
Поменять блоки местами в Bootstrap3
Здравствуйте форумчане! Необходимо в планшетном виде поменять блоки местами - один опустить ниже.