Acest articol va demonstra utilitățile care pot fi utilizate pentru controlul plasării elementelor poziționate pe pagina web.
Utilitare Tailwind utilizate pentru a controla plasarea elementelor poziționate?
Utilitarul CSS Tailwind care se ocupă în mod specific de plasarea elementelor poziționate atât pe axa orizontală, cât și pe axa verticală este „ Sus | Corect | De jos | Stânga ”. La fel ca și alte utilități, oferă și diverse clase care pot seta elementul poziționat în diferite locuri, unele dintre aceste clase sunt menționate mai jos:
- inset-{placementValue}
- start-{placementValue}
- top-{placementValue}
- end-{placementValue}
- jos-{placementValue}
- stânga-{placementValue}
- dreapta-{placementValue}
Acum, să avem un exemplu practic pentru a folosi unele dintre aceste clase pentru o mai bună înțelegere.
Exemplu: Plasarea elementului poziționat folosind utilitarele CSS Tailwind
În acest exemplu, utilitarul descris mai sus va fi folosit pentru a plasa elementul poziționat în locuri diferite pe o pagină web, după cum se arată mai jos:
< corp clasă = „grid grid-cols-3” >
< div clasă = „relativ h-32 w-32 bg-orange-200 p-4 m-4 text-centru justificare-întindere rotunjită” >
< div clasă = „stânga absolută-0 sus-0 h-16 w-16 bg-albastru-400 rotunjit p-4” > Punctul 1 < / div >
< / div >
< div clasă = „relativ h-32 w-32 bg-orange-200 p-4 m-4 text-centru justificare-întindere rotunjită” >
< div clasă = „absolut inset-x-0 top-0 h-16 bg-blue-400 rotunjit p-4” > Punctul 2 < / div >
< / div >
< div clasă = „relativ h-32 w-32 bg-orange-200 p-4 m-4 text-centru justificare-întindere rotunjită” >
< div clasă = „Inset absolut-0 bg-albastru-400 rotunjit p-4” > Punctul 3 < / div >
< / div >
< div clasă = „relativ h-32 w-32 bg-orange-200 p-4 m-4 text-centru justificare-întindere rotunjită” >
< div clasă = „inserție absolută-y-0 dreapta-0 w-16 bg-albastru-400 rotunjit p-4” > Punctul 4 < / div >
< / div >
< div clasă = „relativ h-32 w-32 bg-orange-200 p-4 m-4 text-centru justificare-întindere rotunjită” >
< div clasă = „absolut jos-0 dreapta-0 h-16 w-16 bg-albastru-400 rotunjit p-4” > Punctul 5 < / div >
< / div >
< / corp >
Descrierea codului de mai sus:
- Mai întâi, creați cinci părinți „ div ” și aplicați diverse clase CSS Tailwind pentru a seta poziția relativă, înălțimea, lățimea, fundalul, padding-ul, marginea și așa mai departe.
- Apoi, creați un „ imbricat div ” element din interiorul fiecărui părinte „div”. Plasarea se va face pentru acest element „div” imbricat.
- Apoi, aplicați clasele CSS de vânt din spate de „ absolut ”, “ h ”, “ În ”, “ bg ”, ” p ', și ' rotunjite „pentru a stila „imbricatul” div ' element.
- După aceea, pornind de la div imbricat unu la cinci, atribuiți noi clase de „ stânga-0 sus-0 ”, “ insert-x-0 ”, “ inserție-0 ”, “ insert-y-0 dreapta-0 ', și ' jos-0 dreapta-0 ” respectiv.
- Aceste clase stabilesc poziția elementelor div imbricate în colțul din stânga sus, acoperă poziția de sus, acoperă întreg spațiul părinte, acoperă partea dreaptă și, respectiv, acoperă poziția din stânga jos.
După execuție, previzualizarea elementelor div arată astfel:
Ieșirea arată că elementele poziționate sunt plasate în pozițiile dorite.
Concluzie
„ Sus | Corect | De jos | Stânga ” Utilitarul Tailwind este folosit pentru a controla plasarea elementelor pe pagina web. Folosește mai multe clase pentru a viza fiecare poziție și apoi mută elementul selectat în acel loc în funcție de cerințe. Aceste clase plasează în principal elementele poziționate în stânga, dreapta, jos și sus. Ele pot ajuta să acopere întreaga zonă, să acopere direcții specifice, cum ar fi stânga sau sus și așa mai departe. Acest articol a explicat cu succes utilitățile care pot fi utilizate pentru controlul plasării elementelor poziționate.