- Головна
- статті
- Вертикальна перестановка блоків засобами CSS
Сучасні браузери - Flexbox
Переміщення
В сучасних браузерах (в тому числі Internet Explorer 11 і Edge) управляти візуальним порядком елементів можна за допомогою CSS-властивості order. що є частиною механізму Flexbox. Блоки слідують в порядку зростання значень властивості order. Значенням властивості order має бути ціле число, яке може бути як позитивним, так і негативним. Значення за замовчуванням - 0.
HTML:
flex-direction: column;
>
example> .a / * З'явиться третім * /
.example> .b / * З'явиться другим * /
.example> .c / * З'явиться першим * /
Вертикальне положення переупорядочівать є взаємозалежним. збільшення висоти будь-якого з блоків призводить до автоматичного вертикальному зсуву візуально наступних за ним блоків, в тому числі при динамічній зміні висоти блоків, наприклад, внаслідок збільшення розміру шрифту засобами браузера.
Зворотній порядок
example display: flex;
flex-direction: column-reverse;
>
Застарілі браузери - display: table
У браузерах, які не підтримують Flexbox (IE 10 і нижче), вертикальний порядок проходження блоків на HTML-сторінці можна змінити, надавши їм табличне представлення за допомогою CSS-властивостей сімейства display: table. Незалежно від порядку розташування блоків в HTML-коді, «шапка» (display: table-header-group) такої таблиці відображається в її верхній частині, «підвал» (table-footer-group) - в нижній, а основна частина таблиці ( table-row-group) - між ними.
example display: table;
width: 100%;
>
Описаним чином можна змінювати порядок до трьох сусідніх блоків. Додатково можна задіяти display: table-caption (відображення блоку в ролі підписи до таблиці) в поєднанні з CSS-властивість caption-side зі значенням top або bottom.
Метод працює в більшості поширених браузерів, в тому числі в Internet Explorer починаючи з версії 9 (IE8 - із застереженнями, див. Далі).
IE 6, 7 і 8 - DOM
Застарілі браузери IE6 та IE7 не підтримують CSS-властивості сімейства display: table *.
Крім того, в IE8 в деяких випадках спостерігається динамічна помилка рендеринга: якщо переміщуваний блок містить в собі псевдотаблічние елементи (display: table *) (прояв нюансу помічено тільки в цьому випадку), можливо спонтанне зникнення некор осередків (завжди різних і в різній кількості) псевдотабліци при первинній відображенні сторінки.
var parent = elems [0] .parentNode;
for (var i = count - 1; i> = 0; i--) parent.insertBefore (elems [i], parent.firstChild);
>
>
Визначення можливостей браузера
Визначити, чи підтримує браузер Flexbox, можна шляхом перевірки існування властивості order об'єкта, доступного через властивість style кореневого елемента документа ( ) - document.documentElement.
Визначити версію Internet Explorer можна шляхом перевірки існування нестандартного об'єкта document.all. доступного тільки в IE 10 і нижче, в поєднанні з існуванням або відсутністю одного із стандартних об'єктів.
if ( 'order' in document.documentElement.style) // Flexbox-сумісний браузер.
// Використовуємо `order` або` flex-direction: column-reverse`.
>
else if (document.all ! Document.addEventListener) // IE8 або нижче.
// Змінюємо реальний порядок блоків в DOM-дереві засобами JS.
>
else // Браузер без підтримки Flexbox, в тому числі IE 9/10.
// Використовуємо `display: table`.
>