Tento článok demonštruje nástroje, ktoré možno použiť na ovládanie umiestnenia umiestnených prvkov na webovej stránke.
Používajú sa nástroje Tailwind na ovládanie umiestnenia umiestnených prvkov?
Pomôcka Tailwind CSS, ktorá sa špecificky zaoberá umiestnením umiestnených prvkov na horizontálnej aj vertikálnej osi, je „ Hore | Správne | Spodná časť | Vľavo “. Rovnako ako iné nástroje poskytuje aj rôzne triedy, ktoré môžu nastaviť umiestnený prvok na rôznych miestach, niektoré z týchto tried sú uvedené nižšie:
- inset-{placementValue}
- štart-{placementValue}
- hore-{placementValue}
- end-{placementValue}
- dole-{placementValue}
- vľavo-{placementValue}
- vpravo-{placementValue}
Teraz si dáme praktický príklad na použitie niektorých z týchto tried na lepšie pochopenie.
Príklad: Umiestnenie umiestneného prvku pomocou nástrojov CSS Tailwind
V tomto príklade sa vyššie popísaný nástroj použije na umiestnenie umiestneného prvku na rôzne miesta na webovej stránke, ako je znázornené nižšie:
< telo trieda = 'grid grid-cols-3' >
< div trieda = 'relatívna h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div trieda = 'úplne vľavo-0 hore-0 h-16 w-16 bg-modrá-400 zaoblené p-4' > Položka 1 < / div >
< / div >
< div trieda = 'relatívna h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div trieda = 'absolútna vložka-x-0 top-0 h-16 bg-blue-400 rounded p-4' > Položka 2 < / div >
< / div >
< div trieda = 'relatívna h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div trieda = 'absolútna vložka-0 bg-modrá-400 zaoblená p-4' > Položka 3 < / div >
< / div >
< div trieda = 'relatívna h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div trieda = 'absolútna vložka-y-0 vpravo-0 w-16 bg-modrá-400 zaoblená p-4' > Bod 4 < / div >
< / div >
< div trieda = 'relatívna h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div trieda = 'absolútne dno-0 vpravo-0 h-16 w-16 bg-modrá-400 zaoblené p-4' > Bod 5 < / div >
< / div >
< / telo >
Popis vyššie uvedeného kódu:
- Najprv vytvorte päť rodičov „ div ” a aplikujte rôzne triedy CSS Tailwind na nastavenie relatívnej polohy, výšky, šírky, pozadia, výplne, okraja atď.
- Ďalej vytvorte vnorený „ div ” prvok vnútri každého nadradeného prvku „div“. Umiestnenie sa vykoná pre tento vnorený prvok „div“.
- Potom použite tailwind CSS triedy „ absolútne “, “ h “, “ In “, “ bg “, “ p “ a „ zaoblené “ na štýl vnoreného “ div ' element.
- Potom, počnúc vnoreným divom jedna až päť, priraďte nové triedy „ zľava-0 hore-0 “, “ vložka-x-0 “, “ vložka-0 “, “ vložka-y-0 vpravo-0 “ a „ dole-0 vpravo-0 “.
- Tieto triedy nastavujú polohu vnorených prvkov div v ľavom hornom rohu, pokrývajú hornú pozíciu, pokrývajú celý nadradený priestor, pokrývajú pravú stranu a pokrývajú pozíciu vľavo dole.
Po vykonaní vyzerá ukážka prvkov div takto:
Výstup ukazuje, že umiestnené prvky sú umiestnené na požadovaných pozíciách.
Záver
' Hore | Správne | Spodná časť | Vľavo Nástroj Tailwind sa používa na ovládanie umiestnenia prvkov na webovej stránke. Na zacielenie každej pozície používa niekoľko tried a následne na dané miesto presúva vybraný prvok podľa požiadaviek. Tieto triedy umiestňujú umiestnené prvky hlavne vľavo, vpravo, dole a hore. Môžu pomôcť pokryť celú oblasť, pokryť konkrétne smery, ako je vľavo alebo hore atď. Tento článok úspešne vysvetlil nástroje, ktoré možno použiť na ovládanie umiestnenia umiestnených prvkov.