Aquest article mostrarà les utilitats que es poden utilitzar per controlar la col·locació d'elements posicionats a la pàgina web.
Utilitats Tailwind utilitzades per controlar la col·locació dels elements posicionats?
La utilitat Tailwind CSS que s'ocupa específicament de la col·locació d'elements posicionats tant en eix horitzontal com vertical és ' Amunt | Dret | A baix | Esquerra ”. Igual que altres utilitats, també proporciona diverses classes que poden establir l'element posicionat en diversos llocs, algunes d'aquestes classes s'indiquen a continuació:
- inserció-{placementValue}
- start-{placementValue}
- top-{placementValue}
- end-{placementValue}
- inferior-{placementValue}
- esquerra-{placementValue}
- dreta-{placementValue}
Ara, anem a tenir un exemple pràctic per utilitzar algunes d'aquestes classes per entendre millor.
Exemple: col·locació de l'element posicionat mitjançant les utilitats CSS de Tailwind
En aquest exemple, la utilitat descrita anteriorment s'utilitzarà per col·locar l'element posicionat en diferents llocs d'una pàgina web, tal com es mostra a continuació:
< cos classe = 'grid grid-cols-3' >
< div classe = 'relatiu h-32 w-32 bg-taronja-200 p-4 m-4 text-centre justificar-estirar arrodonit' >
< div classe = 'esquerra absoluta-0 superior-0 h-16 w-16 bg-blau-400 arrodonit p-4' > Element 1 < / div >
< / div >
< div classe = 'relatiu h-32 w-32 bg-taronja-200 p-4 m-4 text-centre justificar-estirar arrodonit' >
< div classe = 'insert absolut-x-0 superior-0 h-16 bg-blau-400 arrodonit p-4' > Tema 2 < / div >
< / div >
< div classe = 'relatiu h-32 w-32 bg-taronja-200 p-4 m-4 text-centre justificar-estirar arrodonit' >
< div classe = 'insert absolut-0 bg-blau-400 arrodonit p-4' > Tema 3 < / div >
< / div >
< div classe = 'relatiu h-32 w-32 bg-taronja-200 p-4 m-4 text-centre justificar-estirar arrodonit' >
< div classe = 'insert absolut-y-0 dreta-0 w-16 bg-blau-400 arrodonit p-4' > Tema 4 < / div >
< / div >
< div classe = 'relatiu h-32 w-32 bg-taronja-200 p-4 m-4 text-centre justificar-estirar arrodonit' >
< div classe = 'abaix absolut-0 dreta-0 h-16 w-16 bg-blau-400 arrodonit p-4' > Tema 5 < / div >
< / div >
< / cos >
Descripció del codi anterior:
- Primer, creeu cinc pares ' div ” i apliqueu diverses classes CSS de Tailwind per establir la posició relativa, l'alçada, l'amplada, el fons, el farciment, el marge, etc.
- A continuació, creeu un ' imbricat ' div ” element dins de cada pare “div”. La col·locació es farà per a aquest element 'div' imbricat.
- A continuació, apliqueu les classes CSS de vent de cua de ' absolut ”, “ h ”, “ En ”, “ bg ”, ” pàg ”, i “ arrodonida ' per estilitzar el ' imbricat ' div ” element.
- Després d'això, a partir del div imbricat un al cinc, assigneu noves classes de ' esquerra-0 dalt-0 ”, “ inserció-x-0 ”, “ inserció-0 ”, “ inserció-y-0 dreta-0 ”, i “ inferior-0 dreta-0 ” respectivament.
- Aquestes classes estableixen la posició dels elements div imbricats a la cantonada superior esquerra, cobreixen la posició superior, cobreixen tot l'espai principal, cobreixen el costat dret i cobreixen la posició inferior esquerra respectivament.
Després de l'execució, la vista prèvia dels elements div té aquest aspecte:
La sortida mostra que els elements posicionats es col·loquen a les posicions desitjades.
Conclusió
El ' Amunt | Dret | A baix | Esquerra La utilitat Tailwind s'utilitza per controlar la col·locació d'elements a la pàgina web. Utilitza diverses classes per orientar cada posició i després mou l'element seleccionat en aquest lloc segons els requisits. Aquestes classes col·loquen principalment els elements posicionats a l'esquerra, dreta, inferior i superior. Poden ajudar a cobrir tota l'àrea, cobrir direccions específiques com l'esquerra o la part superior, etc. Aquest article ha explicat amb èxit les utilitats que es poden utilitzar per controlar la col·locació dels elements posicionats.