Acest articol va exemplifica metoda de aplicare a punctelor de întrerupere și a interogărilor media pe utilitățile „clear” din Tailwind.
Cum să utilizați punctele de întrerupere și interogările media pe „clear” în Tailwind?
Pentru a aplica anumite puncte de întrerupere și interogări media pe utilitarele „clear” în Tailwind, creați o structură HTML. Apoi, definiți valoarea dorită la „ clear-
Exemplu
În acest exemplu, vom folosi „ md ” punct de întrerupere cu ” clar-amândouă „utilitate și „ lg ” punct de întrerupere cu ” clar-nici unul „utilitate în „ ” element pentru a-și schimba poziția pe ecran de dimensiune medie și mare:
< corp >
< div clasă = „h-96 mx-10 p-8 bg-sky-500” >
< img src = „tailwindcss_img.png” clasă = „float-stânga p-3 w-28 h-24” Tot = 'imagine' / >
< img src = „tailwindcss_img.png” clasă = 'float-dreapta p-3' Tot = 'imagine' / >
< p clasă = „text-justify clear-left md:clear-both lg:clear-none” > Tailwind CSS oferă utilități „float” pentru a controla împachetarea conținutului în jurul unui element.
Acest exemplu va arăta cum să utilizați punctele de întrerupere și interogările media cu utilitarul „clear” în Tailwind. < / p >
< / div >
< / corp >
Aici:
- 'plutește la stânga' clasa plutește elementele în partea stângă a containerului.
- „float-dreapta” clasa plutește elementele în partea dreaptă a containerului.
- „clar-stânga” clasa mută elementul
sub elementul flotant din stânga din container.
- „md:clear-both” clasa șterge atât elementele plutitoare din stânga, cât și din dreapta și poziționează elementul
sub ele pe ecran de dimensiune medie.
- „lg:clear-none” clasa dezactivează orice ștergere aplicată elementului
și permite elementului să plutească pe ambele părți ale containerului la o dimensiune mare a ecranului.
Ieșire
Conform rezultatului de mai sus, punctele de întrerupere specificate și interogările media au fost aplicate cu succes utilitarului „clear”.
Concluzie
Pentru aplicarea punctelor de întrerupere și a interogărilor media pe utilitățile „clear” în Tailwind, definiți valoarea dorită la „ clear-