Denne artikkelen vil demonstrere verktøyene som kan brukes til å kontrollere plasseringen av plasserte elementer over nettsiden.
Tailwind-verktøy som brukes til å kontrollere plasseringen av plasserte elementer?
Tailwind CSS-verktøyet som spesifikt omhandler plassering av posisjonerte elementer i både horisontal eller vertikal akse er ' Topp | Høyre | Nederst | Venstre '. Akkurat som andre verktøy, gir den også forskjellige klasser som kan sette det posisjonerte elementet på forskjellige steder, noen av disse klassene er angitt nedenfor:
- innfelt-{placementValue}
- start-{placementValue}
- topp-{placementValue}
- end-{placementValue}
- nederst-{placementValue}
- venstre-{placementValue}
- høyre-{placementValue}
La oss nå ha et praktisk eksempel for å bruke noen av disse klassene for bedre forståelse.
Eksempel: Plassering av posisjonert element ved hjelp av Tailwind CSS Utilities
I dette eksemplet vil det ovenfor beskrevne verktøyet brukes til å plassere det plasserte elementet på forskjellige steder over en nettside, som vist nedenfor:
< kropp klasse = 'grid grid-cols-3' >
< div klasse = 'relativ h-32 w-32 bg-oransje-200 p-4 m-4 tekst-senter rettferdiggjøre-strekk avrundet' >
< div klasse = 'absolutt venstre-0 topp-0 h-16 w-16 bg-blå-400 avrundet p-4' > Vare 1 < / div >
< / div >
< div klasse = 'relativ h-32 w-32 bg-oransje-200 p-4 m-4 tekst-senter rettferdiggjøre-strekk avrundet' >
< div klasse = 'absolutt innfelt-x-0 topp-0 h-16 bg-blå-400 avrundet p-4' > Punkt 2 < / div >
< / div >
< div klasse = 'relativ h-32 w-32 bg-oransje-200 p-4 m-4 tekst-senter rettferdiggjøre-strekk avrundet' >
< div klasse = 'absolutt innfelt-0 bg-blå-400 avrundet p-4' > Punkt 3 < / div >
< / div >
< div klasse = 'relativ h-32 w-32 bg-oransje-200 p-4 m-4 tekst-senter rettferdiggjøre-strekk avrundet' >
< div klasse = 'absolutt innfelt-y-0 høyre-0 w-16 bg-blue-400 avrundet p-4' > Punkt 4 < / div >
< / div >
< div klasse = 'relativ h-32 w-32 bg-oransje-200 p-4 m-4 tekst-senter rettferdiggjøre-strekk avrundet' >
< div klasse = 'absolutt bunn-0 høyre-0 h-16 w-16 bg-blå-400 avrundet p-4' > Punkt 5 < / div >
< / div >
< / kropp >
Beskrivelse av koden ovenfor:
- Først oppretter du fem overordnede ' div ”-elementer og bruk ulike Tailwind CSS-klasser for å angi relativ posisjon, høyde, bredde, bakgrunn, polstring, margin og så videre.
- Deretter oppretter du en nestet ' div '-element i hver overordnede 'div'. Plasseringen skal gjøres for dette nestede 'div'-elementet.
- Bruk deretter medvind CSS-klasser av ' absolutt ', ' h ', ' I ', ' bg ”, ” s ', og ' avrundet ' for å style den nestede ' div ' element.
- Etter det, start fra nestede div én til fem, tilordne nye klasser av ' venstre-0 topp-0 ', ' innfelt-x-0 ', ' innfelt-0 ', ' innfelt-y-0 høyre-0 ', og ' nederst-0 høyre-0 'henholdsvis.
- Disse klassene setter posisjonen til nestede div-elementer øverst til venstre, dekker øverste posisjon, dekker hele foreldreområdet, dekker henholdsvis høyre side og posisjon nederst til venstre.
Etter utførelsen ser forhåndsvisningen av div-elementene slik ut:
Utgangen viser at de posisjonerte elementene er plassert i ønskede posisjoner.
Konklusjon
« Topp | Høyre | Nederst | Venstre Tailwind-verktøyet brukes til å kontrollere plasseringen av elementer over nettsiden. Den bruker flere klasser for å målrette hver posisjon og flytter deretter det valgte elementet til det stedet i henhold til kravene. Disse klassene plasserer hovedsakelig de plasserte elementene til venstre, høyre, bunn og øverst. De kan bidra til å dekke hele området, dekke spesifikke retninger som venstre eller topp, og så videre. Denne artikkelen har forklart verktøyene som kan brukes til å kontrollere plasseringen av posisjonerte elementer.