Поменять вертикально расположенные блоки местами
| Задача | |
| 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";
});
| Обтекание одного блока другим | |
| Автоматическая нумерация строк таблицы | |
| Псевдоэлемент before в виде стрелки |
