Cet article illustrera la méthode d'application des points d'arrêt et des requêtes multimédias sur les utilitaires 'clairs' dans Tailwind.
Comment utiliser les points d'arrêt et les requêtes multimédias sur 'clear' dans Tailwind ?
Pour appliquer des points d'arrêt et des requêtes multimédias particuliers sur des utilitaires 'clairs' dans Tailwind, créez une structure HTML. Ensuite, définissez la valeur souhaitée pour le ' clair-
Exemple
Dans cet exemple, nous utiliserons le ' Maryland 'point d'arrêt avec le' clarifier les deux « utilité et » lg 'point d'arrêt avec le' clair-aucun ' utilité dans le ' ” élément pour changer sa position sur les écrans de taille moyenne et grande :
< corps >
< div classe = 'h-96 mx-10 p-8 bg-sky-500' >
< image src = 'tailwindcss_img.png' classe = 'float-gauche p-3 w-28 h-24' tout = 'image' / >
< image src = 'tailwindcss_img.png' classe = 'flotteur droit p-3' tout = 'image' / >
< p classe = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS fournit des utilitaires 'flottants' pour contrôler l'habillage du contenu autour d'un élément.
Cet exemple montre comment utiliser les points d'arrêt et les requêtes multimédias avec l'utilitaire 'clear' dans Tailwind. < / p >
< / div >
< / corps >
Ici:
- « flotter à gauche » class fait flotter les éléments sur le côté gauche du conteneur.
- 'Flotter à droite' class fait flotter les éléments sur le côté droit du conteneur.
- 'clair-gauche' classe déplace l'élément
sous l'élément flottant à gauche dans le conteneur.
- 'md:clear-both' La classe efface les flottants gauche et droit et positionne l'élément
en dessous d'eux sur une taille d'écran moyenne.
- 'lg: clear-none' La classe désactive tout clear appliqué à l'élément
et permet à l'élément de flotter sur les deux côtés du conteneur à une grande taille d'écran.
Sortir
Selon la sortie ci-dessus, les points d'arrêt et les requêtes multimédias spécifiés ont été appliqués avec succès à l'utilitaire 'clear'.
Conclusion
Pour appliquer des points d'arrêt et des requêtes multimédias sur des utilitaires 'clairs' dans Tailwind, définissez la valeur souhaitée sur ' clair-