In Tailwind CSS, gli elementi sostituiti sono gli elementi il cui contenuto è sostituito da una risorsa esterna, come immagini e video. A volte, gli utenti devono affrontare una sfida per posizionare un elemento sostituito all'interno del contenitore. Questo perché questi elementi possono traboccare dal contenitore se la loro dimensione è maggiore dello spazio disponibile. Tailwind CSS fornisce classi di utilità per controllare come il contenuto di un elemento sostituito è posizionato e allineato all'interno del contenitore.
Questo articolo illustrerà il metodo per posizionare gli elementi sostituiti all'interno di un contenitore in Tailwind CSS.
Come posizionare gli elementi sostituiti all'interno di un contenitore in Tailwind?
Per posizionare gli elementi sostituiti all'interno di un contenitore in Tailwind, creare un programma HTML e utilizzare il ' oggetto-
Sintassi
< elemento classe = 'oggetto-
Esempio
In questo esempio, creeremo un contenitore e utilizzeremo tutti i ' oggetto-
< corpo >
< div classe = 'bg-cielo-300 griglia griglia-righe-3 griglia-flusso-col m-5 spazio-y-4 p-4 giustifica-tra' >
< imm classe = 'oggetto-nessuno oggetto-sinistra-in alto w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imm classe = 'oggetto-nessuno oggetto-sinistra w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imm classe = 'oggetto-nessuno oggetto-sinistra-in basso w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imm classe = 'oggetto-nessuno oggetto-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imm classe = 'oggetto-nessuno oggetto-centro w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imm classe = 'oggetto-nessuno oggetto-fondo w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imm classe = 'oggetto-nessuno oggetto-destra-sopra w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imm classe = 'oggetto-nessuno oggetto-destra w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imm classe = 'oggetto-nessuno oggetto-destra-basso w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
corpo >
Qui, nell'elemento
- “ bg-cielo-300 La classe ” imposta il colore di sfondo del contenitore su sky.
- “ griglia La classe ” abilita un layout a griglia.
- “ griglia-righe-3 ” class imposta il numero di righe nella griglia su 3.
- “ griglia-flusso-col La classe ” definisce il flusso degli elementi della griglia nelle colonne.
- “ m-5 ” class aggiunge 5 unità di margine attorno al contenitore.
- “ spazio-y-4 La classe ” aggiunge una spaziatura verticale di 4 unità tra gli elementi figlio
all'interno del contenitore.
- “ p-4 La classe aggiunge 4 unità di riempimento al contenuto all'interno del contenitore.
- “ giustificare-tra La classe ” allinea gli elementi figlio all'interno del contenitore e li distribuisce uniformemente.
Negli elementi
:
- “ oggetto-nessuno La classe ” non applica alcuna posizione all'elemento e visualizza l'elemento nella sua posizione predefinita nel contenitore.
- “ oggetto-sinistra-in alto La classe ” posiziona l'elemento
nell'angolo in alto a sinistra del suo contenitore.
- “ oggetto-sinistra La classe ” allinea l'elemento al bordo sinistro del contenitore e lo mantiene centrato verticalmente.
- “ oggetto-sinistra-in basso La classe ” posiziona l'elemento
nell'angolo in basso a sinistra del suo contenitore.
- “ oggetto-top La classe ” posiziona l'elemento sul bordo superiore del suo contenitore e lo imposta centrato orizzontalmente.
- “ oggetto-centro ” class posiziona l'elemento al centro del contenitore e lo mantiene centrato orizzontalmente e verticalmente.
- “ fondo oggetto La classe ” posiziona l'elemento sul bordo inferiore del suo contenitore e lo mantiene centrato orizzontalmente.
- “ oggetto-destra-in alto La classe ” posiziona l'elemento
nell'angolo in alto a destra del contenitore.
- “ oggetto-diritto La classe ” posiziona l'elemento sul bordo destro del suo contenitore e lo mantiene centrato verticalmente.
- “ oggetto-destra-in basso ” class posiziona l'elemento nell'angolo in basso a destra del suo contenitore.
Produzione
Nella pagina web di cui sopra, si può osservare che tutto il contenuto dell'elemento sostituito è stato posizionato correttamente.
Conclusione
Per posizionare gli elementi sostituiti all'interno di un contenitore in Tailwind, il ' oggetto-
Le utilità vengono utilizzate con gli elementi desiderati, come le immagini. Gli utenti devono definire la posizione o il lato specifico, ad esempio sinistra, destra o centro nell'utilità 'oggetto- ' per posizionare gli elementi sostituiti. Questo articolo ha illustrato il metodo per posizionare gli elementi sostituiti all'interno di un contenitore in Tailwind CSS.