- principal
- Articole
- Vertical permutation of blocks utilizing CSS
Browsere moderne - Flexbox
Ordine arbitrară
În browserele moderne (inclusiv Internet Explorer 11 și Edge), puteți controla ordinea vizuală a elementelor utilizând ordinea de proprietăți CSS. care face parte din mecanismul Flexbox. Blocurile sunt urmate în ordine crescătoare. Valoarea proprietății ordinului trebuie să fie un număr întreg, care poate fi pozitiv sau negativ. Valoarea implicită este 0.
HTML:
direcție flexibilă: coloană;
>
exemplu> .a / * Afișat de a treia * /
.exemplu> .b / * Afișat al doilea * /
.exemplu> .c / * Afișat prima dată * /
Poziția verticală a reordonării este interdependentă. orice creștere a înălțimii blocurilor conduce la blocul de deplasare verticală automată pentru el în urma vizual, inclusiv schimbarea dinamic înălțimea blocurilor, de exemplu, prin creșterea dimensiunii fontului a browser-ului înseamnă.
Ordine inversă
exemplu de afișare: flex;
direcția flexibilă: coloană-inversă;
>
Browserele învechite - afișaj: tabel
În browserele care nu acceptă flexbox (IE 10 și mai jos), ordinea verticală a blocurilor de pe pagina HTML pot fi modificate, oferindu-le o vedere din tabel folosind display-ul de proprietate CSS-familie: tabel. Indiferent de ordinea de machete in HTML code „capac» (afișare: tabel-header-grup) a unui astfel de tabel este prezentat în partea sa superioară, „subsol» (tabelul-footer-grup) - în partea de jos, iar partea principală a tabelului ( tabel-grup-rând) - între ele.
exemplu de afișare: tabel;
lățime: 100%;
>
În acest fel, puteți modifica ordinea de până la trei blocuri vecine. Opțional, utilizați afișare: tabel-legendă (bloc de mapare ca o semnătură la masă), în combinație cu CSS-proprietate legendă-side cu valoarea de sus sau de jos.
Metoda funcționează în cele mai populare browsere, inclusiv Internet Explorer de la versiunea 9 (IE8 - cu rezervări, vezi mai jos).
IE 6, 7 și 8 - DOM
Browserele învechite IE6 și IE7 nu acceptă proprietățile CSS ale ecranului: tabel * familie.
În plus, IE8, în unele cazuri, există un bug de redare dinamică: în cazul în care blocul mobil conține elemente psevdotablichnye (afișaj: tabel *) (o manifestare de nuanțe observate numai în acest caz), poate celule dispariția NONCOR spontane (întotdeauna diferite și în cantități diferite) pseudo tabele în redarea inițială a paginii.
var părinte = elems [0] .parentNode;
pentru (var i = count - 1; i> = 0; Eu--) parent.insertBefore (elems [i], parent.firstChild);
>
>
Identificați caracteristicile browserului
Pentru a determina dacă browserul Flexbox acceptă, este posibil să verificăm existența proprietății de comandă a obiectului accesibil prin proprietatea de stil a elementului rădăcină al documentului ( ) - document.documentElement.
Puteți determina versiunea Internet Explorer verificând existența unui obiect non-standard document.all. disponibil numai în IE 10 și mai jos, în combinație cu existența sau absența unuia dintre obiectele standard.
dacă ('comanda' în document.documentElement.style) // Browser compatibil cu Flexbox.
// Utilizați "comanda" sau "flex-direction: column-reverse".
>
altfel dacă (document.all ! document.addEventListener) // IE8 sau mai mic.
// Schimbați ordinea reală a blocurilor din arborele DOM folosind JS.
>
alt // Browser fără suport Flexbox, inclusiv IE 9/10.
// Utilizați "display: table".
>
Articole similare
Trimiteți-le prietenilor: