Cet article présentera les utilitaires qui peuvent être utilisés pour contrôler le placement des éléments positionnés sur la page Web.
Utilitaires Tailwind utilisés pour contrôler le placement des éléments positionnés ?
L'utilitaire CSS Tailwind qui traite spécifiquement du placement des éléments positionnés sur l'axe horizontal ou vertical est ' Haut | Droite | Bas | Gauche ». Tout comme d'autres utilitaires, il fournit également diverses classes qui peuvent définir l'élément positionné à divers endroits, certaines de ces classes sont indiquées ci-dessous :
- encart-{placementValue}
- début-{placementValue}
- top-{placementValue}
- fin-{placementValue}
- bas-{placementValue}
- gauche-{placementValue}
- droite-{placementValue}
Voyons maintenant un exemple pratique pour utiliser certaines de ces classes pour une meilleure compréhension.
Exemple : placement d'un élément positionné à l'aide des utilitaires CSS Tailwind
Dans cet exemple, l'utilitaire décrit ci-dessus va être utilisé pour placer l'élément positionné à différents endroits sur une page Web, comme indiqué ci-dessous :
< corps classe = 'grille grille-cols-3' >
< div classe = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 texte-centre justifier-étirement arrondi' >
< div classe = 'gauche absolue-0 haut-0 h-16 w-16 bg-blue-400 arrondi p-4' > Objet 1 < / div >
< / div >
< div classe = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 texte-centre justifier-étirement arrondi' >
< div classe = 'encart absolu-x-0 top-0 h-16 bg-blue-400 arrondi p-4' > Point 2 < / div >
< / div >
< div classe = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 texte-centre justifier-étirement arrondi' >
< div classe = 'encart absolu-0 bg-blue-400 arrondi p-4' > Point 3 < / div >
< / div >
< div classe = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 texte-centre justifier-étirement arrondi' >
< div classe = 'encart absolu-y-0 droite-0 w-16 bg-blue-400 arrondi p-4' > Point 4 < / div >
< / div >
< div classe = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 texte-centre justifier-étirement arrondi' >
< div classe = 'bas absolu-0 droite-0 h-16 w-16 bg-blue-400 arrondi p-4' > Point 5 < / div >
< / div >
< / corps >
Description du code ci-dessus :
- Tout d'abord, créez cinq parents ' div ' et appliquez diverses classes CSS Tailwind pour définir la position relative, la hauteur, la largeur, l'arrière-plan, le remplissage, la marge, etc.
- Ensuite, créez un « imbriqué » div ' à l'intérieur de chaque parent ' div '. Le placement va être fait pour cet élément « div » imbriqué.
- Ensuite, appliquez les classes CSS tailwind de « absolu », « h », « Dans », « bg », « p ', et ' arrondi ' pour styliser l'imbriqué ' div ' élément.
- Après cela, en commençant par les divisions imbriquées un à cinq, attribuez de nouvelles classes de « gauche-0 haut-0 », « encart-x-0 », « encart-0 », « encart-y-0 droite-0 ', et ' bas-0 droite-0 ' respectivement.
- Ces classes définissent la position des éléments div imbriqués dans le coin supérieur gauche, couvrent la position supérieure, couvrent tout l'espace parent, couvrent le côté droit et couvrent la position inférieure gauche respectivement.
Après l'exécution, l'aperçu des éléments div ressemble à ceci :
Le résultat montre que les éléments positionnés sont placés aux positions souhaitées.
Conclusion
Le ' Haut | Droite | Bas | Gauche « L'utilitaire Tailwind est utilisé pour contrôler le placement des éléments sur la page Web. Il utilise plusieurs classes pour cibler chaque position, puis déplace l'élément sélectionné à cet endroit en fonction des exigences. Ces classes placent principalement les éléments positionnés à gauche, à droite, en bas et en haut. Ils peuvent aider à couvrir toute la zone, couvrir des directions spécifiques comme la gauche ou le haut, etc. Cet article a expliqué avec succès les utilitaires pouvant être utilisés pour contrôler le placement des éléments positionnés.