U Tailwind CSS-u, zamijenjeni elementi su elementi čiji je sadržaj zamijenjen vanjskim resursom, kao što su slike i videozapisi. Ponekad se korisnici suočavaju s izazovom pozicioniranja zamijenjenog elementa unutar spremnika. To je zato što ti elementi mogu preliti spremnik ako je njihova veličina veća od dostupnog prostora. Tailwind CSS pruža uslužne klase za kontrolu kako se sadržaj zamijenjenog elementa postavlja i poravnava unutar spremnika.
Ovaj će članak ilustrirati metodu pozicioniranja zamijenjenih elemenata unutar spremnika u Tailwind CSS-u.
Kako postaviti zamijenjene elemente unutar spremnika u stražnji vjetar?
Za postavljanje zamijenjenih elemenata unutar spremnika u Tailwindu, napravite HTML program i upotrijebite ' objekt-
Sintaksa
< element razreda = 'objekt-
Primjer
U ovom primjeru napravit ćemo spremnik i koristiti sve ' objekt- ” (slike) za navođenje njihove zamijenjene pozicije unutar spremnika:
< tijelo >
< div razreda = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img razreda = 'objekt-none objekt-lijevo-gore w-24 h-24 moj-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razreda = 'objekt-none objekt-lijevo w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razreda = 'objekt-none objekt-lijevo-dolje w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razreda = 'objekt-none objekt-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razreda = 'objekt-none objekt-centar w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razreda = 'objekt-none objekt-dno w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razreda = 'objekt-none objekt-desno-gore w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razreda = 'objekt-none objekt-desno w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razreda = 'objekt-none objekt-desno-dolje w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
tijelo >
Ovdje, u nadređenom
- “ bg-sky-300 ” postavlja boju pozadine spremnika na nebo.
- “ rešetka ” klasa omogućuje raspored mreže.
- “ rešetka-redovi-3 ” klasa postavlja broj redaka u mreži na 3.
- “ grid-flow-col ” klasa definira tijek mrežnih stavki u stupcima.
- “ m-5 ” klasa dodaje 5 jedinica margine oko spremnika.
- “ prostor-y-4 ” klasa dodaje okomiti razmak od 4 jedinice između podređenih
elemenata unutar spremnika.
- “ p-4 ” klasa dodaje 4 jedinice ispune sadržaju unutar spremnika.
- “ justify-between ” klasa poravnava podređene elemente unutar spremnika i ravnomjerno ih raspoređuje.
U elementima
:
- “ objekt-nema ” ne primjenjuje nikakvu poziciju na element i prikazuje element na zadanoj poziciji u spremniku.
- “ objekt-lijevo-gore ” klasa postavlja
element u gornji lijevi kut njegovog spremnika.
- “ objekt-lijevo ” klasa poravnava element s lijevim rubom spremnika i drži ga okomito centriranim.
- “ objekt-lijevo-dolje ” klasa postavlja
element u donji lijevi kut njegovog spremnika.
- “ objekt-top ” klasa postavlja element na gornji rub njegovog spremnika i postavlja ga vodoravno u središte.
- “ objekt-centar ” klasa postavlja element u središte spremnika i drži ga vodoravno i okomito centriranim.
- “ objekt-dno ” klasa postavlja element na donji rub njegovog spremnika i drži ga vodoravno centriranim.
- “ objekt-desno-gore ” klasa postavlja
element u gornji desni kut spremnika.
- “ objektno pravo ” klasa postavlja element na desni rub njegovog spremnika i drži ga okomito centriranim.
- “ objekt-desno-dolje ” klasa postavlja element u donji desni kut njegovog spremnika.
Izlaz
Na gornjoj web stranici može se uočiti da je sav sadržaj zamijenjenog elementa uspješno pozicioniran.
Zaključak
Za postavljanje zamijenjenih elemenata unutar spremnika u Tailwindu, ' objekt-
” pomoćni programi koriste se sa željenim elementima, kao što su slike. Korisnici trebaju definirati određeni položaj ili stranu, tj. lijevo, desno ili središte u uslužnom programu “object- ” za pozicioniranje zamijenjenih elemenata. Ovaj je članak ilustrirao metodu pozicioniranja zamijenjenih elemenata unutar spremnika u Tailwind CSS-u.