Tailwind CSS-is on asendatud elemendid elemendid, mille sisu asendatakse välise ressursiga, nagu pildid ja videod. Mõnikord seisavad kasutajad silmitsi väljakutsega paigutada konteinerisse asendatud element. Seda seetõttu, et need elemendid võivad mahutist üle voolata, kui nende suurus on vabast ruumist suurem. Tailwind CSS pakub utiliidiklasse, mis kontrollivad, kuidas asendatud elemendi sisu konteinerisse paigutatakse ja joondatud.
See artikkel illustreerib meetodit asendatud elementide paigutamiseks konteinerisse Tailwind CSS-is.
Kuidas paigutada asendatud elemendid konteinerisse taganttuules?
Asendatud elementide paigutamiseks konteinerisse Tailwindis looge HTML-programm ja kasutage ' objekt-
Süntaks
< element klass = 'objekt-
Näide
Selles näites loome konteineri ja kasutame kõiki ' objekt- ” (pildi) elemendid, et määrata nende asendatud asukoht konteineris:
< keha >
< div klass = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-beve' >
< img klass = 'objekt-pole objekt-vasak-ülemine w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-pole objekt-vasak w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-pole objekt-vasak-alumine w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-ei-objekt-ülemine w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-ei-objektikeskus w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-pole objekt-alumine w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-pole objekt-parem-ülemine w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-pole objekt-parem w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-pole objekt-parem-all w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
keha >
Siin, emaelemendis
- “ bg-sky-300 ” klass määrab konteineri taustavärviks taeva.
- “ võre ” klass võimaldab ruudustiku paigutust.
- “ ruudustik-read-3 ” klass määrab ruudustiku ridade numbriks 3.
- “ grid-flow-col ” klass määratleb ruudustiku üksuste voo veergudes.
- “ m-5 ” klass lisab konteineri ümber 5 ühikut varu.
- “ tühik-y-4 ” klass lisab konteineris olevate
alamelementide vahele vertikaalse vahekauguse 4 ühikut.
- “ p-4 ” klass lisab konteineri sees olevale sisule 4 ühikut polsterdust.
- “ õigustama-vahel ” klass joondab alamelemendid konteineris ja jaotab need ühtlaselt.
Elementides
:
- “ objekt-pole ” klass ei rakenda elemendile ühtegi positsiooni ja kuvab elemendi konteineris vaikepositsioonil.
- “ objekt-vasak-ülemine ” klass paigutab elemendi
oma konteineri vasakusse ülanurka.
- “ objekt-vasak ” klass joondab elemendi konteineri vasaku servaga ja hoiab selle vertikaalselt keskel.
- “ objekt-vasak-all ” klass positsioneerib elemendi
oma konteineri vasakusse alumisse nurka.
- “ objekt-top ” klass asetab elemendi konteineri ülaserva ja seab selle horisontaalselt keskele.
- “ objektikeskus ” klass positsioneerib elemendi konteineri keskele ja hoiab seda horisontaalselt ja vertikaalselt keskel.
- “ objekt-põhi ” klass asetab elemendi konteineri alumisse serva ja hoiab seda horisontaalselt keskel.
- “ objekt-parem-ülemine ” klass paigutab elemendi
konteineri paremasse ülanurka.
- “ objekt-õigus ” klass positsioneerib elemendi konteineri paremasse serva ja hoiab seda vertikaalselt keskel.
- “ objekt-parem-all ” klass positsioneerib elemendi oma konteineri paremasse alumisse nurka.
Väljund
Ülaltoodud veebilehel on näha, et kogu asendatud elemendi sisu on edukalt positsioneeritud.
Järeldus
Asendatud elementide paigutamiseks konteinerisse Tailwindis tuleb objekt-
” utiliite kasutatakse soovitud elementidega, näiteks piltidega. Kasutajad peavad asendatud elementide paigutamiseks määrama utiliidi „objekt- ” konkreetse asukoha või külje, st vasakul, paremal või keskel. See artikkel on illustreerinud meetodit asendatud elementide paigutamiseks konteinerisse Tailwind CSS-is.