V Tailwind CSS so zamenjani elementi elementi, katerih vsebina je nadomeščena z zunanjim virom, kot so slike in videoposnetki. Včasih se uporabniki soočijo z izzivom, kako umestiti zamenjani element v vsebnik. To je zato, ker lahko ti elementi preplavijo vsebnik, če je njihova velikost večja od razpoložljivega prostora. Tailwind CSS ponuja razrede pripomočkov za nadzor nad tem, kako je vsebina nadomeščenega elementa nameščena in poravnana znotraj vsebnika.
Ta članek bo prikazal metodo za pozicioniranje zamenjanih elementov znotraj vsebnika v Tailwind CSS.
Kako namestiti zamenjane elemente znotraj vsebnika v zadnjem vetru?
Za umestitev zamenjanih elementov v vsebnik v Tailwindu naredite program HTML in uporabite » predmet-
Sintaksa
< element razred = 'objekt-
Primer
V tem primeru bomo naredili posodo in uporabili vse ' predmet- ” (slike), da določite njihov zamenjani položaj v vsebniku:
< telo >
< div razred = 'bg-sky-300 mreža grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img razred = 'object-none object-left-top w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razred = 'objekt-none objekt-levo w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razred = 'objekt-none objekt-levo-spodaj w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razred = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razred = 'objekt-none objekt-center w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razred = 'objekt-none objekt-dno w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razred = 'objekt-none objekt-desno-zgoraj w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razred = 'objekt-none objekt-desno w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img razred = 'objekt-none objekt-desno-spodaj w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
telo >
Tukaj, v nadrejenem elementu
- “ bg-nebo-300 ” nastavi barvo ozadja vsebnika na nebo.
- “ mreža ” razred omogoča mrežno postavitev.
- “ grid-rows-3 ” nastavi število vrstic v mreži na 3.
- “ grid-flow-col ” definira tok postavk mreže v stolpcih.
- “ m-5 ” doda 5 enot marže okoli vsebnika.
- “ prostor-y-4 ” doda navpični razmik 4 enot med podrejene elemente
v vsebniku.
- “ p-4 ” doda 4 enote oblazinjenja vsebini znotraj vsebnika.
- “ poravnati med ” poravna podrejene elemente znotraj vsebnika in jih enakomerno porazdeli.
V elementih
:
- “ objekt-brez ” ne uporabi nobenega položaja za element in prikaže element na privzetem položaju v vsebniku.
- “ objekt-levo-zgoraj ” postavi element
v zgornji levi kot vsebnika.
- “ objekt-levo ” poravna element na levi rob vsebnika in ga ohranja navpično na sredini.
- “ objekt-levo-spodaj ” postavi element
v spodnji levi kot vsebnika.
- “ objekt-top ” postavi element na zgornji rob vsebnika in ga postavi vodoravno na sredino.
- “ objektno središče ” razred postavi element na sredino vsebnika in ga ohranja vodoravno in navpično sredinsko.
- “ objekt-dno ” postavi element na spodnji rob njegovega vsebnika in ga ohranja vodoravno na sredini.
- “ objekt-desno-zgoraj ” postavi element
v zgornji desni kot vsebnika.
- “ objektna pravica ” postavi element na desni rob vsebnika in ga ohranja navpično na sredini.
- “ objekt-desno-spodaj ” postavi element v spodnji desni kot vsebnika.
Izhod
Na zgornji spletni strani je mogoče opaziti, da je bila vsa vsebina zamenjanega elementa uspešno postavljena.
Zaključek
Če želite zamenjane elemente postaviti znotraj vsebnika v Tailwindu, uporabite » predmet-
” se uporabljajo z želenimi elementi, kot so slike. Uporabniki morajo določiti določen položaj ali stran, tj. levo, desno ali sredino v pripomočku »object- «, da postavijo zamenjane elemente. Ta članek je ponazoril metodo za pozicioniranje zamenjanih elementov znotraj vsebnika v Tailwind CSS.