In dit artikel worden de hulpprogramma's gedemonstreerd die kunnen worden gebruikt voor het regelen van de plaatsing van gepositioneerde elementen op de webpagina.
Tailwind-hulpprogramma's die worden gebruikt om de plaatsing van gepositioneerde elementen te regelen?
Het Tailwind CSS-hulpprogramma dat zich specifiek bezighoudt met de plaatsing van gepositioneerde elementen in zowel horizontale als verticale as is “ Boven | Juist | Onder | Links ”. Net als andere hulpprogramma's biedt het ook verschillende klassen die het gepositioneerde element op verschillende plaatsen kunnen instellen. Enkele van deze klassen worden hieronder vermeld:
- inzet-{placementValue}
- start-{placementValue}
- top-{placementValue}
- end-{placementValue}
- bodem-{placementValue}
- links-{placementValue}
- rechts-{placementValue}
Laten we nu een praktisch voorbeeld hebben om enkele van deze klassen te gebruiken voor een beter begrip.
Voorbeeld: plaatsing van gepositioneerd element met behulp van Tailwind CSS-hulpprogramma's
In dit voorbeeld wordt het hierboven beschreven hulpprogramma gebruikt om het gepositioneerde element op verschillende plaatsen op een webpagina te plaatsen, zoals hieronder weergegeven:
< lichaam klas = 'rasterraster-cols-3' >
< div klas = 'relatief h-32 w-32 bg-oranje-200 p-4 m-4 tekst-midden uitvullen-rek afgerond' >
< div klas = 'absoluut links-0 top-0 h-16 w-16 bg-blauw-400 afgerond p-4' > Item 1 < / div >
< / div >
< div klas = 'relatief h-32 w-32 bg-oranje-200 p-4 m-4 tekst-midden uitvullen-rek afgerond' >
< div klas = 'absoluut inliggend-x-0 top-0 h-16 bg-blauw-400 afgerond p-4' > Artikel 2 < / div >
< / div >
< div klas = 'relatief h-32 w-32 bg-oranje-200 p-4 m-4 tekst-midden uitvullen-rek afgerond' >
< div klas = 'absoluut inzet-0 bg-blauw-400 afgerond p-4' > Artikel 3 < / div >
< / div >
< div klas = 'relatief h-32 w-32 bg-oranje-200 p-4 m-4 tekst-midden uitvullen-rek afgerond' >
< div klas = 'absoluut inzet-y-0 rechts-0 w-16 bg-blauw-400 afgerond p-4' > Artikel 4 < / div >
< / div >
< div klas = 'relatief h-32 w-32 bg-oranje-200 p-4 m-4 tekst-midden uitvullen-rek afgerond' >
< div klas = 'absoluut onder-0 rechts-0 h-16 w-16 bg-blauw-400 afgerond p-4' > Artikel 5 < / div >
< / div >
< / lichaam >
Beschrijving van de bovenstaande code:
- Maak eerst vijf bovenliggende “ div '-elementen en pas verschillende Tailwind CSS-klassen toe om de relatieve positie, hoogte, breedte, achtergrond, opvulling, marge, enzovoort in te stellen.
- Maak vervolgens een geneste “ div ”-element binnen elke bovenliggende “div”. De plaatsing gebeurt voor dit geneste “div”-element.
- Pas vervolgens CSS-klassen met staartwind toe van “ absoluut ”, “ H ”, “ In ”, “ bg ”, “ P ', En ' afgerond ” om de geneste “ te stylen div ”-element.
- Wijs daarna, beginnend bij geneste div één tot vijf, nieuwe klassen toe van “ links-0 top-0 ”, “ inzet-x-0 ”, “ inzet-0 ”, “ inzet-y-0 rechts-0 ', En ' onder-0 rechts-0 ”respectievelijk.
- Deze klassen stellen respectievelijk de positie in van geneste div-elementen in de linkerbovenhoek, bestrijken de bovenste positie, bestrijken de gehele bovenliggende ruimte, bedekken de rechterkant en bestrijken de positie linksonder.
Na de uitvoering ziet het voorbeeld van de div-elementen er als volgt uit:
Uit de uitvoer blijkt dat de gepositioneerde elementen op de gewenste posities zijn geplaatst.
Conclusie
De ' Boven | Juist | Onder | Links Het Tailwind-hulpprogramma wordt gebruikt om de plaatsing van elementen op de webpagina te regelen. Het gebruikt verschillende klassen om elke positie te targeten en verplaatst vervolgens het geselecteerde element naar die plaats volgens de vereisten. Deze klassen plaatsen de gepositioneerde elementen voornamelijk links, rechts, onder en boven. Ze kunnen helpen het hele gebied te bestrijken, specifieke richtingen te bestrijken, zoals links of boven, enzovoort. In dit artikel zijn met succes de hulpprogramma's uitgelegd die kunnen worden gebruikt voor het regelen van de plaatsing van gepositioneerde elementen.