CSS změna pořadí HTML elementů - Michal "Aggi" Jílek
 Blíž ke koním.cz       WamiDesign.cz       Foto-Wami.cz       Psí škola Berenika       Hucul Club - Francova Lhota       CK Museon - Vacances, s r.o.

CSS změna pořadí HTML elementů

Občas potřebujeme prohodit pořádí nějakých těch HTML elementů v kódu. Třeba kvůli vlastnosti fload:right, nebo kvůli prohození části webu při responzivní změně viewportu. Jedna z možností je použít „trik“ s CSS3 vlastností transform: rotate().

V příkladu použijeme dva <div class="other"> které chceme prohodit vertikálně, a které jsou potomkem („vnořené do“) <div class="Reorder">:

<div class="Reorder">
    <div class="order">
        První který bude druhý
    </div>
    <div class="order">
        První který bude druhý
    </div>
</div>

Které následně doplníme o stylování:

.Reorder {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);                
    direction: rtl;
        
    .order {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    direction: ltr;  
    }//order
}//reorder


Máte co říct? Jděte do toho a zanechte komentář!

CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.