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

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

  • автор:

Способы смены порядка вывода элементов с помощью CSS

В этой статье мы рассмотрим несколько различных методов CSS для переупорядочения вывода элементов HTML.

Цель

Наша раскладка очень простая. В частности, на маленьких экранах (меньше 600px) она будет выглядеть так:

Раскладка на маленьких экранах - 4 кнопки выведены в один столбик

На средних экранах и больше (от 600px) кнопки будут выстраиваться в ряд:

Раскладка на больших экранах - 4 кнопки выведены в ряд

Наша главная задача — поменять порядок кнопок на обратный.

Разметка

Разметка будет самая простая: просто элемент div , содержащий четыре кнопки:

 

Стили

На маленьком экране у всех кнопок будут одинаковые стили:

.boxes button < display: block; width: 100%; padding: 15px; border: none; margin-bottom: 5px; box-sizing: border-box; font-size: 1rem; text-align: center; text-decoration: none; background: gold; color: #000; >.boxes button:nth-of-type(even)

На больших экранах мы зададим width: 25% , остальные стили будут определяться методом CSS, который мы будем применять для задания обратного порядка кнопок.

@media screen and (min-width: 600px) < /* we skip this property in flexbox and grid methods */ width: 25%; /* more stuff here */ >

Наконец, у нас будут стили для состояния focus наших кнопок:

.boxes button:focus

Таким образом, если мы будем использовать для навигации клавишу Tab, наши кнопки при фокусировке станут темно-красными.

Стили для фокусировки

Методы упорядочивания колонок

Теперь мы готовы проверить различные подходы CSS для вывода кнопок в реверсивном порядке при превышении областью видимости ширины в 599px.

Метод №1: плавающие блоки

Можно просто добавить блокам float: right , вот полные стили:

@media screen and (min-width: 600px) < .boxes button < float: right; width: 25%; >> 

И демо с Codepen:

Метод №2: позиционирование

Альтернативным вариантом будет задание позиции элементам, относительной или абсолютной.

По первому варианту (с относительным позиционированием) мы зададим кнопкам, плывущим влево свойство position: relative и затем расставим их с помощью свойство left .

@media screen and (min-width: 600px) < .boxes button < position: relative; float: left; width: 25%; >.boxes button:nth-of-type(1) < left: 75%; >.boxes button:nth-of-type(2) < left: 25%; >.boxes button:nth-of-type(3) < left: -25%; >.boxes button:nth-of-type(4) < left: -75%; >> 

Вторым вариантом (с использованием абсолютного позиционирования) мы зададим нашим кнопкам position: absolute , а с помощью свойства left разместим их более точно.

@media screen and (min-width: 600px) < .boxes < position: relative; >.boxes button < position: absolute; width: 25%; >.boxes button:nth-of-type(1) < left: 75%; >.boxes button:nth-of-type(2) < left: 50%; >.boxes button:nth-of-type(3) < left: 25%; >.boxes button:nth-of-type(4) < left: 0; >> 

Демо на Codepen:

Метод №3: свойство direction

Менее очевиден подход на основе свойства direction — оно предназначено для смены направления чтения текста. В нашем случае мы задаем direction: rtl (справа налево) для элемента-обертки, что позволит сменить направление раскладки.

Примечание: для этого примера мы дадим нашим кнопкам поведение элементов таблицы, чтобы создать горизонтальную раскладку.

Вы можете видеть необходимые стили CSS ниже:

@media screen and (min-width: 600px) < .boxes < display: table; width: 100%; direction: rtl; >.boxes button < display: table-cell; width: 25%; >> 

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

.boxes button

Демо на Codepen:

Метод №4: трансформация

Изящным решением будет оставить кнопкам float: left; и затем применить transform: scaleX(-1) к ним и их родителю. Задав отрицательные значения мы сделаем так, что трансформируемый элемент не масштабируется, а переворачивается по горизонтальной оси.

@media screen and (min-width: 600px) < .boxes < transform: scaleX(-1); >.boxes button < float: left; transform: scaleX(-1); width: 25%; >> 

Демо на Codepen:

Мы также можем использовать для создания нужного порядка функцию трансформации rotate . Все, что нам надо добавить кнопкам и их родителю свойство transform: rotateY(180deg) .

CSS для этого решения:

@media screen and (min-width: 600px) < .boxes < transform: rotateY(180deg); >.boxes button < float: left; transform: rotateY(180deg); width: 25%; >> 

Демо на Codepen:

Метод №5: флексбокс

Флексбокс это еще один способ изменения порядка колонок. В нашем примере мы используем два разных свойства флексбокса для создания нашей раскладки.

Первый подход это сделать родительский элемент кнопок флекс-контейнером и затем добавить flex-direction: row-reverse , вот так:

@media screen and (min-width: 600px) < .boxes < display: flex; flex-direction: row-reverse; >> 

Демо на Codepen:

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

@media screen and (min-width: 600px) < .boxes < display: flex; >.boxes button:nth-of-type(1) < order: 4; >.boxes button:nth-of-type(2) < order: 3; >.boxes button:nth-of-type(3) < order: 2; >.boxes button:nth-of-type(4) < order: 1; >> 

Демо на Codepen:

Метод №6: грид-раскладка

Многообещающим решением для расстановки элементов является раскладка на основе CSS Grid. Несмотря на крайне ограниченную поддержку в браузерах на момент написания статьи ее стоит попробовать. Учитывайте, что наш пример будет работать только в Chrome (по умолчанию эта возможность отключена, но ее легко активировать).

Не погружаясь глубоко в детали я опишу два способа с использованием CSS Grid.

Первый вариант это задание родительскому элементу кнопок свойства display: grid; и использование свойства grid-column для определения порядка вывода кнопок. В дополнение мы обеспечим попадание всех кнопок в один ряд путем прямого указания этого — grid-row: 1 .

@media screen and (min-width: 600px) < .boxes < display: grid; grid-template-columns: repeat(4, 1fr); >.boxes button < grid-row: 1; >.boxes button:nth-of-type(1) < grid-column: 4; >.boxes button:nth-of-type(2) < grid-column: 3; >.boxes button:nth-of-type(3) < grid-column: 2; >.boxes button:nth-of-type(4) < grid-column: 1; >> 

Демо на Codepen:

Второй вариант использования CSS Grid похож на второй способ использования флексбокса. Мы зададим контейнеру свойство display: grid; , а затем используем свойство order для определения порядка вывода кнопок.

@media screen and (min-width: 600px) < .boxes < display: grid; grid-template-columns: repeat(4, 1fr); >.boxes button:nth-of-type(1) < order: 4; >.boxes button:nth-of-type(2) < order: 3; >.boxes button:nth-of-type(3) < order: 2; >.boxes button:nth-of-type(4) < order: 1; >> 

Демо на Codepen:

Напомню, что для тестирования этого метода, вам надо активировать “Experimental Web Platform features” в Chrome.

Порядок исходников и визуальный порядок

Как было показано, мы можем использовать различные подходы CSS для смены порядка наших кнопок. Попробуем пройтись по нашим демо, используя клавиатуру (кликните на пен и нажмите клавишу Tab) для навигации по кнопкам. Вы заметите, что даже, если кнопка с номером 4 выведена первой, фокус сначала появляется на кнопке с номером 1, так как она расположена первой в DOM. То же случится, если мы протестируем наши демо со скринридером (я проводил тесты с NVDA).

Учитывая эту независимость порядка CSS от порядка DOM, нам надо быть крайне осторожными с частями страниц, порядок которых мы изменяем с помощью CSS. Например, свойство флексбокса order это один из наиболее гибких способов для переупорядочения элементов, согласно спецификации:

Авторы должны использовать order только для визуального, а не логического переупорядочивания контента. Попытка использовать order для логического порядка не сработает.

То же самое спецификация говорит о свойстве order CSS Grid.

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

Примечание: если вы используете второй способ с флексбоксом в Firefox, то вы заметите, что навигация с клавиатуры работает отлично и фокус на средних экранах появляется сначала на кнопке №4. Такое поведение является багом.

Заключение

В этой статье мы проверили различные методы CSS для переупорядочивания элементов HTML. Конечно, не все из этих методов универсальны и перед тем, как выбрать нужный вам, вы должны учесть несколько вещей:

  • Браузеры, которые вам надо поддерживать. Некоторые из перечисленных подходов не работают в старых версиях Internet Explorer (т.е. < 10).
  • Степень сложности перестановки — это может быть что-то простое, как наш пример или что-то более сложное.
Дополнительные материалы
  • HTML Source Order vs CSS Display Order от Adrian Roselli
  • Flexbox & the keyboard navigation disconnect от Léonie Watson

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

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

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

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

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

Войти

Уже зарегистрированы? Войдите здесь.

Больше способов поделиться.

Сейчас на странице 0 пользователей

  • Нет пользователей, просматривающих эту страницу.

Покупцям

  • Оплата розширень фізичними особами
  • Оплата розширень юридичними особами
  • Політика повернень

Розробникам

  • Регламент розміщення розширень
  • Регламент продажу та підтримки розширень
  • Віртуальний обліковий запис автора
  • Політика просування оголошень
  • 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 и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

Курсы javascript

Ребята, подскажите новичку, пожалуйста.
Задание: Есть 3 дива. Кликаем на любой из них, скажем первый. Затем, кликаем на любой другой, скажем 2ой или 3ий. После клика на второй див, они должны поменяться местами с первым кликнутым.
Я написал только код самих дивов и сделал их выделяемыми, а вот именно с переменой местами — даже нет идей.
Прошу помощи!

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

Как мне поменять блоки местами используя только CSS? На этой странице, это карточка товара магазина на opencart. Вот как нужно поставить блоки:

777e57d87c4a498dbb016502f0250858.png

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

UPD: Ставлю классам left и right position:absolute и они вообще исчезают.

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

Комментировать
Решения вопроса 3

BRoNiksus

Начинающий front-end

Ну если Вы хотите через position: absolute, тогда у родителя (обертки например) должен быть задан position: relative. После этого уже можно будет их как-то координировать через top, left, right, bottom. А вообще одним css тут вряд ли обойдешься.

c1cb913afe17469fb7b7606c01082e4c.jpg

Или еще вариант :

.product-info.split-30-70 .left width: 30%;
float: right;
>

.product-info > div width: 50%;
float: left;
>

.product-info.split-30-70 .right width: 100%;
clear: both;
>

А там уже играйся с блоками

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

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