Denne artikel vil demonstrere de værktøjer, der kan bruges til at kontrollere placeringen af placerede elementer over websiden.
Medvindsværktøjer bruges til at kontrollere placeringen af placerede elementer?
Tailwind CSS-værktøjet, der specifikt beskæftiger sig med placeringen af placerede elementer i både vandret eller lodret akse er ' Top | højre | Nederst | Venstre ”. Ligesom andre hjælpeprogrammer giver det også forskellige klasser, der kan indstille det placerede element på forskellige steder, nogle af disse klasser er angivet nedenfor:
- indsat-{placementValue}
- start-{placementValue}
- top-{placementValue}
- slut-{placementValue}
- bund-{placementValue}
- venstre-{placementValue}
- højre-{placementValue}
Lad os nu have et praktisk eksempel for at bruge nogle af disse klasser til bedre forståelse.
Eksempel: Placering af positioneret element ved hjælp af Tailwind CSS Utilities
I dette eksempel vil det ovenfor beskrevne værktøj blive brugt til at placere det placerede element forskellige steder over en webside, som vist nedenfor:
< legeme klasse = 'gitter grid-cols-3' >
< div klasse = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 tekst-center retfærdig-stræk afrundet' >
< div klasse = 'absolut venstre-0 top-0 h-16 w-16 bg-blå-400 afrundet p-4' > Punkt 1 < / div >
< / div >
< div klasse = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 tekst-center retfærdig-stræk afrundet' >
< div klasse = 'absolut inset-x-0 top-0 h-16 bg-blue-400 afrundet p-4' > Punkt 2 < / div >
< / div >
< div klasse = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 tekst-center retfærdig-stræk afrundet' >
< div klasse = 'absolut inset-0 bg-blue-400 afrundet p-4' > Punkt 3 < / div >
< / div >
< div klasse = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 tekst-center retfærdig-stræk afrundet' >
< div klasse = 'absolut inset-y-0 right-0 w-16 bg-blue-400 afrundet p-4' > Punkt 4 < / div >
< / div >
< div klasse = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 tekst-center retfærdig-stræk afrundet' >
< div klasse = 'absolut bund-0 højre-0 h-16 w-16 bg-blå-400 afrundet p-4' > Punkt 5 < / div >
< / div >
< / legeme >
Beskrivelse af ovenstående kode:
- Først skal du oprette fem overordnede ' div ”-elementer og anvende forskellige Tailwind CSS-klasser for at indstille den relative position, højde, bredde, baggrund, polstring, margin og så videre.
- Opret derefter en indlejret ' div '-element inde i hver overordnet 'div'. Placeringen vil blive udført for dette indlejrede 'div'-element.
- Anvend derefter medvinds-CSS-klasser af ' absolut ', ' h ', ' I ', ' bg ”, ” s ', og ' afrundet ' for at style den indlejrede ' div ' element.
- Derefter, startende fra indlejret div et til fem, tildel nye klasser af ' venstre-0 top-0 ', ' indsat-x-0 ', ' indsat-0 ', ' indsat-y-0 højre-0 ', og ' nederst-0 højre-0 ' henholdsvis.
- Disse klasser angiver placeringen af indlejrede div-elementer i øverste venstre hjørne, dækker den øverste position, dækker hele forældreområdet, dækker henholdsvis højre side og den nederste venstre position.
Efter udførelsen ser forhåndsvisningen af div-elementerne således ud:
Udgangen viser, at de positionerede elementer er placeret i ønskede positioner.
Konklusion
Det ' Top | højre | Nederst | Venstre ” Tailwind-værktøjet bruges til at kontrollere placeringen af elementer over websiden. Den bruger flere klasser til at målrette hver position og flytter derefter det valgte element til det sted i overensstemmelse med kravene. Disse klasser placerer hovedsageligt de placerede elementer til venstre, højre, nederst og øverst. De kan hjælpe med at dække hele området, dække specifikke retninger som venstre eller top og så videre. Denne artikel har med succes forklaret de værktøjer, der kan bruges til at kontrollere placeringen af placerede elementer.