Függőleges permutációs blokkok css eszközökkel
- legfontosabb
- Cikkek
- Függőleges blokk átrendeződés jelenti CSS
Modern böngésző - flexbox
csoszog
A modern böngészők (például az Internet Explorer 11 és él), hogy ellenőrizzék a vizuális sorrendjét az elemek, akkor a CSS-tulajdonságok a sorrendben. Flexbox amely része a mechanizmus. Blocks majd emelkedő sorrendben értékeinek tulajdonságait. Az érték az ingatlan érdekében kell, hogy legyen egy egész szám, amely lehet pozitív vagy negatív. Alapértelmezett érték - 0.
HTML:
flex-irányban: oszlop;
>
Például> .a / * * jelenik meg a harmadik /
.Például> .b / * jelenik * második /
.Például> .c / * megjelenjen az első * /
A függőleges helyzete átrendezésére is összefügg. bármilyen növekedése a magassága a blokk vezet automatikus függőleges elmozdulás blokk előző következő, beleértve a dinamikusan változó magassága a blokkokat, például azáltal, hogy növeli a betűméretet a böngésző jelent.
vissza annak érdekében,
Például kijelző: flex;
flex-irányban: oszlop-fordított;
>
Elavult böngésző - display: table
A böngészők nem támogatják flexbox (IE 10 és alatta), a függőleges sorrendben a blokkok a HTML-oldal lehet változtatni azáltal, hogy egy asztal nézet segítségével CSS-család tulajdonát display: table. Függetlenül attól, hogy a sorrendben elrendezések HTML-kód „cap» (display: table-header-csoport) egy ilyen táblázat mutatja a felső részén „pince» (asztal-footer-csoport) - a lap alján, és a legfontosabb része az asztal ( táblázat-sor-csoport) - közöttük.
Például display: table;
szélesség: 100%;
>
Ily módon, a sorrend lehet változtatni, hogy három szomszédos blokk. Adott esetben, a display: table-caption (blokk leképezést aláírását a táblázatban) kombinálva CSS-tulajdonság felirat-oldalán a felső érték vagy alsó.
A módszer működik leggyakoribb böngészők, beleértve az Internet Explorer 9-es verzió (IE8 - fenntartásokkal, lásd alább.).
IE 6, 7 és 8 - DOM
Elavult böngésző IE6 és IE7 nem támogatja a CSS-család tulajdonát display: table *.
Ezen túlmenően, IE8, bizonyos esetekben van egy dinamikus rendering hiba: ha a mozgatható tömb tartalmaz psevdotablichnye elemek (display: table *) (megnyilvánulása árnyalatok látható csak ebben az esetben), lehet spontán eltűnése NONCOR sejtek (mindig más és más mennyiségben) ál a kezdeti oldalleképezés.
var szülő = elems [0] .parentNode;
for (var i = count - 1; i> = 0; én--) parent.insertBefore (elems [i], parent.firstChild);
>
>
Meghatározó a böngésző képességeiről
Határozza meg, hogy flexbox böngésző támogatja, akkor ellenőrizze, hogy létezik a tulajdonságok érdekében a tárgy keresztül érhető stílusú épület a gyökér eleme a dokumentum ( ) - document.documentElement.
Határozzuk meg a verzió az Internet Explorer is ellenőrzi, hogy létezik egy egyedi objektum document.all. csak az IE 10 és alatt együtt a megléte vagy hiánya az egyik szabványos objektumok.
if ( 'rend' a document.documentElement.style) // flexbox-kompatibilis böngészőt.
// használata `order` or` flex-irányban: oszlop-reverse`.
>
else if (document.all ! Document.addEventListener) // IE8 vagy az alatti.
// Változás a tényleges, hogy a blokkok a DOM-fa JS jelent.
>
mást // böngésző támogatás nélkül flexbox IE 9/10.
// A `kijelző: table`.
>