Questo articolo esemplifica il metodo di applicazione di punti di interruzione e query multimediali sulle utilità 'clear' in Tailwind.
Come utilizzare i punti di interruzione e le query multimediali su 'clear' in Tailwind?
Per applicare punti di interruzione particolari e query multimediali su utilità 'chiare' in Tailwind, crea una struttura HTML. Quindi, definire il valore desiderato per ' clear-
Esempio
In questo esempio, useremo il ' md ” punto di rottura con il “ chiaro-entrambi ” utilità e “ LG ” punto di rottura con il “ chiaro-nessuno ” utilità in “ ” elemento per modificarne la posizione su schermi di dimensioni medie e grandi:
< corpo >
< div classe = 'h-96 mx-10 p-8 bg-cielo-500' >
< imm src = 'tailwindcss_img.png' classe = 'float-sinistra p-3 w-28 h-24' qualunque cosa = 'Immagine' / >
< imm src = 'tailwindcss_img.png' classe = 'fluttuante a destra p-3' qualunque cosa = 'Immagine' / >
< P classe = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS fornisce utilità 'float' per controllare l'avvolgimento del contenuto attorno a un elemento.
Questo esempio mostrerà come utilizzare i punti di interruzione e le media query con l'utilità 'clear' in Tailwind. < / P >
< / div >
< / corpo >
Qui:
- 'flottante a sinistra' class sposta gli elementi sul lato sinistro del contenitore.
- 'fluttuante a destra' class sposta gli elementi sul lato destro del contenitore.
- “chiara-sinistra” class sposta l'elemento
sotto l'elemento mobile a sinistra nel contenitore.
- 'md:clear-entrambi' class cancella entrambi i float di sinistra e di destra e posiziona l'elemento
sotto di essi su uno schermo di dimensioni medie.
- 'lg:clear-none' La classe disabilita qualsiasi cancellazione applicata all'elemento
e consente all'elemento di fluttuare su entrambi i lati del contenitore su uno schermo di grandi dimensioni.
Produzione
In base all'output precedente, i punti di interruzione e le query multimediali specificati sono stati applicati correttamente all'utilità 'clear'.
Conclusione
Per applicare punti di interruzione e media query su utilità 'clear' in Tailwind, definire il valore desiderato per ' clear-