Ta članek bo prikazal pripomočke, ki jih je mogoče uporabiti za nadzor postavitve pozicioniranih elementov na spletni strani.
Pripomočki Tailwind, ki se uporabljajo za nadzor namestitve pozicioniranih elementov?
Pripomoček Tailwind CSS, ki se posebej ukvarja s postavitvijo pozicioniranih elementov v vodoravni ali navpični osi, je “ Vrh | Desno | Spodaj | levo ”. Tako kot drugi pripomočki ponuja tudi različne razrede, ki lahko nastavijo postavljeni element na različna mesta, nekateri od teh razredov so navedeni spodaj:
- inset-{placementValue}
- začetek-{placementValue}
- top-{placementValue}
- konec-{placementValue}
- bottom-{placementValue}
- levo-{placementValue}
- desno-{placementValue}
Zdaj pa si oglejmo praktični primer za uporabo nekaterih od teh razredov za boljše razumevanje.
Primer: postavitev pozicioniranega elementa z uporabo pripomočkov CSS Tailwind
V tem primeru bo zgoraj opisani pripomoček uporabljen za postavitev pozicioniranega elementa na različna mesta na spletni strani, kot je prikazano spodaj:
< telo razred = 'mreža grid-cols-3' >
< div razred = 'relativno h-32 w-32 bg-oranžna-200 p-4 m-4 besedilo-center poravnati-raztegniti zaokroženo' >
< div razred = 'absolutno levo-0 zgoraj-0 h-16 w-16 bg-modra-400 zaokroženo p-4' > Točka 1 < / div >
< / div >
< div razred = 'relativno h-32 w-32 bg-oranžna-200 p-4 m-4 besedilo-center poravnati-raztegniti zaokroženo' >
< div razred = 'absolutni vložek-x-0 top-0 h-16 bg-modra-400 zaobljena p-4' > Točka 2 < / div >
< / div >
< div razred = 'relativno h-32 w-32 bg-oranžna-200 p-4 m-4 besedilo-center poravnati-raztegniti zaokroženo' >
< div razred = 'absolutni vložek-0 bg-modra-400 zaokrožena p-4' > Točka 3 < / div >
< / div >
< div razred = 'relativno h-32 w-32 bg-oranžna-200 p-4 m-4 besedilo-center poravnati-raztegniti zaokroženo' >
< div razred = 'absolutni vložek-y-0 desno-0 w-16 bg-modra-400 zaokroženo p-4' > Točka 4 < / div >
< / div >
< div razred = 'relativno h-32 w-32 bg-oranžna-200 p-4 m-4 besedilo-center poravnati-raztegniti zaokroženo' >
< div razred = 'absolutno spodaj-0 desno-0 h-16 w-16 bg-modra-400 zaokroženo p-4' > Točka 5 < / div >
< / div >
< / telo >
Opis zgornje kode:
- Najprej ustvarite pet nadrejenih ' div ” in uporabite različne razrede CSS Tailwind za nastavitev relativnega položaja, višine, širine, ozadja, oblazinjenja, roba itd.
- Nato ustvarite ugnezdeni ' div « znotraj vsakega nadrejenega »div«. Umestitev bo izvedena za ta ugnezdeni element »div«.
- Nato uporabite razrede CSS tailwind » absolutno ”, “ h ”, “ notri ”, “ bg , ” str «, in » zaokrožen ' za oblikovanje ugnezdenega ' div ” element.
- Po tem, začenši od ugnezdenega diva ena do pet, dodelite nove razrede ' levo-0 zgoraj-0 ”, “ vložek-x-0 ”, “ vložek-0 ”, “ vložek-y-0 desno-0 «, in » spodaj-0 desno-0 « oz.
- Ti razredi nastavijo položaj ugnezdenih elementov div v zgornjem levem kotu, pokrivajo zgornji položaj, pokrivajo celoten nadrejeni prostor, pokrivajo desno stran in pokrivajo spodnji levi položaj.
Po izvedbi je predogled elementov div videti takole:
Izhod pokaže, da so pozicionirani elementi postavljeni na želene položaje.
Zaključek
' Vrh | Desno | Spodaj | levo ” Pripomoček Tailwind se uporablja za nadzor postavitve elementov na spletni strani. Uporablja več razredov za ciljanje vsakega položaja in nato premakne izbrani element na to mesto glede na zahteve. Ti razredi večinoma postavljajo pozicionirane elemente na levo, desno, spodaj in zgoraj. Pomagajo lahko pokriti celotno območje, pokriti določene smeri, kot sta levo ali zgoraj itd. Ta članek je uspešno razložil pripomočke, ki jih je mogoče uporabiti za nadzor postavitve pozicioniranih elementov.