Как поменять местами блоки в 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,482 6 6 золотых знаков 42 42 серебряных знака 97 97 бронзовых знаков
.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 руб Как поменять блоки местами?
Как поменять местами itemsnew-list-item-wrapper с images_box-model-spec с помощью css (wrap, flex. ) ?
Сейчас у меня два блока в линию, левый поменять с правым.
- Вопрос задан более трёх лет назад
- 18400 просмотров
1 комментарий
Простой 1 комментарий
Как менять блоки местами?
Нужно на моб. устройствах поменять блоки местами. Можно ли средствами bootstrap или юзать js?
Отслеживать
задан 7 июл 2016 в 7:41
2,236 4 4 золотых знака 27 27 серебряных знаков 68 68 бронзовых знаков
Нужно чтобы блок, который находится снизу, был сверху.
7 июл 2016 в 7:42
Уточните вопрос. У вас адаптивная верстка и нужно, чтобы на мобильных устройствах, блок который был сверху переехал вниз, или же пользователь сам меняет положение блоков?
7 июл 2016 в 7:47
Можно и бутстрап, и js, и с помощью flex ов сделать.