Tento článek demonstruje nástroje, které lze použít pro ovládání umístění umístěných prvků na webové stránce.
Používají se nástroje Tailwind k ovládání umístění umístěných prvků?
Nástroj Tailwind CSS, který se konkrétně zabývá umístěním umístěných prvků ve vodorovné i svislé ose, je „ Nahoru | Správně | Spodní | Vlevo, odjet “. Stejně jako ostatní nástroje poskytuje také různé třídy, které mohou nastavit umístěný prvek na různá místa, některé z těchto tříd jsou uvedeny níže:
- vložka-{placementValue}
- start-{placementValue}
- nahoře-{placementValue}
- end-{placementValue}
- dole-{placementValue}
- vlevo-{placementValue}
- vpravo-{placementValue}
Nyní si uveďme praktický příklad použití některých z těchto tříd pro lepší pochopení.
Příklad: Umístění umístěného prvku pomocí nástrojů CSS Tailwind
V tomto příkladu bude výše popsaný nástroj použit k umístění umístěného prvku na různá místa na webové stránce, jak je znázorněno níže:
< tělo třída = 'grid grid-cols-3' >
< div třída = 'relativní h-32 w-32 bg-oranžová-200 p-4 m-4 text-center justify-stretch rounded' >
< div třída = 'zcela vlevo-0 nahoře-0 h-16 w-16 bg-modrá-400 zaoblené p-4' > Položka 1 < / div >
< / div >
< div třída = 'relativní h-32 w-32 bg-oranžová-200 p-4 m-4 text-center justify-stretch rounded' >
< div třída = 'absolutní vložka-x-0 top-0 h-16 bg-blue-400 rounded p-4' > Položka 2 < / div >
< / div >
< div třída = 'relativní h-32 w-32 bg-oranžová-200 p-4 m-4 text-center justify-stretch rounded' >
< div třída = 'absolutní vložka-0 bg-modrá-400 zaoblená p-4' > Položka 3 < / div >
< / div >
< div třída = 'relativní h-32 w-32 bg-oranžová-200 p-4 m-4 text-center justify-stretch rounded' >
< div třída = 'absolutní vložka-y-0 vpravo-0 w-16 bg-modrá-400 zaoblená p-4' > Položka 4 < / div >
< / div >
< div třída = 'relativní h-32 w-32 bg-oranžová-200 p-4 m-4 text-center justify-stretch rounded' >
< div třída = 'absolutně dole-0 vpravo-0 h-16 w-16 bg-modrá-400 zaoblené p-4' > Položka 5 < / div >
< / div >
< / tělo >
Popis výše uvedeného kódu:
- Nejprve vytvořte pět rodičů „ div ” a aplikujte různé třídy CSS Tailwind k nastavení relativní polohy, výšky, šířky, pozadí, odsazení, okraje atd.
- Dále vytvořte vnořený „ div ” prvek uvnitř každého nadřazeného prvku „div“. Umístění bude provedeno pro tento vnořený prvek „div“.
- Poté použijte tailwind CSS třídy „ absolutní “, “ h “, “ v “, “ bg “, “ p ', a ' zaoblený 'pro styl vnořených' div prvek.
- Poté, počínaje vnořeným divem jedna až pět, přiřaďte nové třídy „ vlevo-0 nahoře-0 “, “ vložka-x-0 “, “ vložka-0 “, “ vložka-y-0 vpravo-0 ', a ' dole-0 vpravo-0 “.
- Tyto třídy nastavují polohu vnořených prvků div v levém horním rohu, pokrývají horní pozici, pokrývají celý rodičovský prostor, pokrývají pravou stranu a pokrývají levou dolní pozici.
Po provedení vypadá náhled prvků div takto:
Výstup ukazuje, že umístěné prvky jsou umístěny na požadovaných pozicích.
Závěr
' Nahoru | Správně | Spodní | Vlevo, odjet ” Nástroj Tailwind se používá k ovládání umístění prvků na webové stránce. K zacílení každé pozice používá několik tříd a poté na dané místo přesune vybraný prvek podle požadavků. Tyto třídy převážně umísťují umístěné prvky vlevo, vpravo, dole a nahoře. Mohou pomoci pokrýt celou oblast, pokrýt specifické směry, jako je vlevo nebo nahoře, a tak dále. Tento článek úspěšně vysvětlil nástroje, které lze použít pro ovládání umístění umístěných prvků.