Den här artikeln kommer att visa de verktyg som kan användas för att kontrollera placeringen av placerade element över webbsidan.
Medvindsverktyg som används för att styra placeringen av placerade element?
Tailwind CSS-verktyget som specifikt hanterar placeringen av placerade element i både horisontell eller vertikal axel är ' Topp | Rätt | Nederst | Vänster ”. Precis som andra verktyg tillhandahåller den också olika klasser som kan ställa in det placerade elementet på olika platser, några av dessa klasser anges nedan:
- insatt-{placementValue}
- start-{placementValue}
- top-{placementValue}
- slut-{placementValue}
- botten-{placementValue}
- vänster-{placementValue}
- höger-{placementValue}
Låt oss nu ha ett praktiskt exempel för att använda några av dessa klasser för bättre förståelse.
Exempel: Placering av positionerat element med hjälp av Tailwind CSS Utilities
I det här exemplet kommer det ovan beskrivna verktyget att användas för att placera det placerade elementet på olika platser över en webbsida, som visas nedan:
< kropp klass = 'grid grid-cols-3' >
< div klass = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 text-center justera-sträcka rundad' >
< div klass = 'absolut vänster-0 topp-0 h-16 w-16 bg-blå-400 rundad p-4' > Punkt 1 < / div >
< / div >
< div klass = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 text-center justera-sträcka rundad' >
< div klass = 'absolut infälld-x-0 topp-0 h-16 bg-blå-400 rundad p-4' > Punkt 2 < / div >
< / div >
< div klass = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 text-center justera-sträcka rundad' >
< div klass = 'absolut infälld-0 bg-blue-400 rundad p-4' > Punkt 3 < / div >
< / div >
< div klass = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 text-center justera-sträcka rundad' >
< div klass = 'absolut insatt-y-0 höger-0 w-16 bg-blå-400 rundad p-4' > Punkt 4 < / div >
< / div >
< div klass = 'relativ h-32 w-32 bg-orange-200 p-4 m-4 text-center justera-sträcka rundad' >
< div klass = 'absolut botten-0 höger-0 h-16 w-16 bg-blå-400 rundad p-4' > Punkt 5 < / div >
< / div >
< / kropp >
Beskrivning av ovanstående kod:
- Skapa först fem förälder ' div ”-element och tillämpa olika Tailwind CSS-klasser för att ställa in relativ position, höjd, bredd, bakgrund, utfyllnad, marginal och så vidare.
- Skapa sedan en kapslad ' div ' element i varje förälder 'div'. Placeringen kommer att göras för detta kapslade 'div'-element.
- Använd sedan medvinds-CSS-klasser av ' absolut ”, “ h ”, “ I ”, “ bg ”, ” sid ', och ' avrundad ' för att utforma den kapslade ' div ' element.
- Efter det, med början från kapslade div ett till fem, tilldela nya klasser av ' vänster-0 topp-0 ”, “ infälld-x-0 ”, “ infälld-0 ”, “ insatt-y-0 höger-0 ', och ' nedre-0 höger-0 ' respektive.
- Dessa klasser anger positionen för kapslade div-element i det övre vänstra hörnet, täcker den övre positionen, täcker hela överordnade utrymmet, täcker höger sida respektive täcker den nedre vänstra positionen.
Efter körningen ser förhandsgranskningen av div-elementen ut så här:
Utgången visar att de placerade elementen är placerade i önskade positioner.
Slutsats
den ' Topp | Rätt | Nederst | Vänster ” Tailwind-verktyget används för att styra placeringen av element över webbsidan. Den använder flera klasser för att rikta in sig på varje position och flyttar sedan det valda elementet till den platsen enligt kraven. Dessa klasser placerar huvudsakligen de placerade elementen till vänster, höger, botten och överst. De kan hjälpa till att täcka hela området, täcka specifika riktningar som vänster eller topp, och så vidare. Den här artikeln har framgångsrikt förklarat de verktyg som kan användas för att kontrollera placeringen av placerade element.