Tailwind CSS:ssä korvatut elementit ovat elementtejä, joiden sisältö korvataan ulkoisella resurssilla, kuten kuvilla ja videoilla. Joskus käyttäjät kohtaavat haasteen sijoittaa korvattu elementti säiliöön. Tämä johtuu siitä, että nämä elementit voivat vuotaa säiliön yli, jos niiden koko on suurempi kuin käytettävissä oleva tila. Tailwind CSS tarjoaa hyödyllisyysluokkia, joilla ohjataan, kuinka korvatun elementin sisältö sijoitetaan ja kohdistetaan säilössä.
Tämä artikkeli havainnollistaa menetelmää korvattujen elementtien sijoittamiseksi säilöön Tailwind CSS:ssä.
Kuinka sijoittaa korvatut elementit säiliöön myötätuulessa?
Jos haluat sijoittaa korvatut elementit säilöön Tailwindissä, tee HTML-ohjelma ja käytä ' objekti-
Syntaksi
< elementti luokkaa = 'objekti-
Esimerkki
Tässä esimerkissä teemme kontin ja käytämme kaikkia ' objekti- ” (kuva) -elementit määrittääksesi niiden korvatun sijainnin säilössä:
< kehon >
< div luokkaa = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img luokkaa = 'objekti-ei mitään objekti-vasen-ylä w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img luokkaa = 'objekti-ei mitään objekti-vasen w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img luokkaa = 'objekti-ei-objekti-vasen-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img luokkaa = 'objekti-ei-objekti-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img luokkaa = 'objekti-ei mitään objektikeskus w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img luokkaa = 'objekti-ei mitään objekti-pohja w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img luokkaa = 'objekti-ei-objekti-oikea-ylä w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img luokkaa = 'objekti-ei mitään objekti-oikea w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img luokkaa = 'objekti-ei-objekti-oikea-alhainen w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
kehon >
Tässä ylätason
- ' bg-sky-300 ” luokka asettaa -säiliön taustaväriksi taivas.
- ' ruudukko ” luokka mahdollistaa ruudukkoasettelun.
- ' ruudukko-rivit-3 ” luokka asettaa ruudukon rivien numeroksi 3.
- ' grid-flow-col ” luokka määrittelee ruudukon kohteiden kulun sarakkeissa.
- ' m-5 ” luokka lisää 5 yksikköä marginaalia kontin ympärille.
- ' space-y-4 ” luokka lisää 4 yksikön pystyvälin alatason
-elementtien väliin säilön sisällä.
- ' p-4 ” luokka lisää 4 yksikköä täyttöä säiliön sisältöön.
- ' perustella-välillä ” luokka tasaa alielementit säilön sisällä ja jakaa ne tasaisesti.
-elementeissä:
- ' objekti-ei mitään ” luokka ei aseta elementille mitään sijaintia ja näyttää elementin oletuspaikassaan säilössä.
- ' objekti-vasen-ylä ” luokka sijoittaa
-elementin säilön vasempaan yläkulmaan.
- ' objekti-vasen ” luokka kohdistaa elementin säiliön vasempaan reunaan ja pitää sen pystysuorassa keskellä.
- ' objekti-vasen-ala ” luokka sijoittaa
-elementin säilön vasempaan alakulmaan.
- ' objekti-top ” luokka sijoittaa elementin säiliönsä yläreunaan ja asettaa sen vaakasuoraan keskelle.
- ' objektikeskus ” luokka sijoittaa elementin säiliön keskelle ja pitää sen vaaka- ja pystysuunnassa keskellä.
- ' objekti-pohja ” luokka sijoittaa elementin säiliönsä alareunaan ja pitää sen vaakasuorassa keskitettynä.
- ' objekti-oikea-ylhäällä ” luokka sijoittaa
-elementin säilön oikeaan yläkulmaan.
- ' objekti-oikea ” luokka sijoittaa elementin säiliönsä oikeaan reunaan ja pitää sen pystysuorassa keskellä.
- ' objekti-oikea-ala ” luokka sijoittaa elementin säilön oikeaan alakulmaan.
Lähtö
Yllä olevalla verkkosivulla voidaan havaita, että kaikki korvatun elementin sisältö on sijoitettu onnistuneesti.
Johtopäätös
Jos haluat sijoittaa korvatut elementit säilöön myötätuulessa, ' objekti-
” apuohjelmia käytetään haluttujen elementtien, kuten kuvien, kanssa. Käyttäjien on määritettävä tietty sijainti tai sivu eli vasen, oikea tai keskipiste 'object- ' -apuohjelmassa korvattujen elementtien sijoittamiseksi. Tämä artikkeli on havainnollistanut menetelmää korvattujen elementtien sijoittamiseksi säilöön Tailwind CSS:ssä.