🏠 | 💻  IT | CSS |

Поменять вертикально расположенные блоки местами

Содержание статьи
Задача
HTML
CSS
JavaScript

Задача

Нужно поменять местами блоки которые расположены вертикально. Это проще сделать с помощью ротации свойств table-header-groop и table-footer-group, но если блоков больше двух их уже недостаточно.

Сперва рассмотрим как это сделать по нажатию кнопки.

HTML

<button id="remove_adv_button">Убрать рекламу</button> <button id="show_adv_button">Вернуть рекламу</button> <div id="rb-content-articles">One<div> <div id="rb-related-articles">Two<div> <div id="rb-first-adv">Three<div> <div id="rb-second-adv">Four<div>

CSS

<style> #remove_adv_button,#show_adv_button {width:100%;font-size:1.2rem;} #show_adv_button {display: none;} .rb_grid { display: grid; grid-template-columns: 100%; } .rb-first-adv { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .rb-content-articles { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; } .rb-second-adv { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; } .rb-related-articles { grid-column-start: 1; grid-column-end: 2; grid-row-start: 7; grid-row-end: 8; } </style>

JavaScript

let remove_adv_button = document.getElementById('remove_adv_button'); let show_adv_button = document.getElementById('show_adv_button'); let r_content_articles = document.getElementById('rb-content-articles'); let r_related_articles = document.getElementById('rb-related-articles'); let r_first_adv = document.getElementById('rb-first-adv'); let r_second_adv = document.getElementById('rb-second-adv'); remove_adv_button.addEventListener('click', () => { console.log("remove adv button clicked"); r_content_articles.style.gridRowStart = "1"; r_content_articles.style.gridRowEnd = "2"; r_related_articles.style.gridRowStart = "3"; r_related_articles.style.gridRowEnd = "4"; r_first_adv.style.gridRowStart = "5"; r_first_adv.style.gridRowEnd = "6"; r_second_adv.style.gridRowStart = "7"; r_second_adv.style.gridRowEnd = "8"; show_adv_button.style.display = "block"; remove_adv_button.style.display = "none"; }); show_adv_button.addEventListener('click', () => { console.log("show adv button clicked"); r_content_articles.style.gridRowStart = "3"; r_content_articles.style.gridRowEnd = "4"; r_related_articles.style.gridRowStart = "7"; r_related_articles.style.gridRowEnd = "8"; r_first_adv.style.gridRowStart = "1"; r_first_adv.style.gridRowEnd = "2"; r_second_adv.style.gridRowStart = "5"; r_second_adv.style.gridRowEnd = "6"; show_adv_button.style.display = "none"; remove_adv_button.style.display = "block"; });

Статьи о CSS
Обтекание одного блока другим
Автоматическая нумерация строк таблицы
Псевдоэлемент before в виде стрелки
Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@eth1.ru если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети: