I Tailwind CSS är ersatta element de element vars innehåll ersätts av en extern resurs, såsom bilder och videor. Ibland står användare inför en utmaning att placera ett utbytt element i behållaren. Detta beror på att dessa element kan svämma över behållaren om deras storlek är större än det tillgängliga utrymmet. Tailwind CSS tillhandahåller verktygsklasser för att styra hur innehållet i ett ersatt element placeras och justeras i behållaren.
Den här artikeln kommer att illustrera metoden för att placera ersatta element i en container i Tailwind CSS.
Hur placerar man utbytta element i en container i medvind?
För att placera ersatta element i en container i Tailwind, skapa ett HTML-program och använd ' objekt-
Syntax
< element klass = 'objekt-
Exempel
I det här exemplet kommer vi att göra en behållare och använda alla ' objekt- ” (bild) element för att ange deras ersatta position i behållaren:
< kropp >
< div klass = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img klass = 'objekt-inget objekt-vänster-topp w-24 h-24 min-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-inget objekt-vänster w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-inget objekt-vänster-botten w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-inget objekt-topp w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-inget objekt-center w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-inget objekt-botten w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-inget objekt-höger-topp w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-inget objekt-höger w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klass = 'objekt-inget objekt-höger-botten w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
kropp >
Här, i det överordnade
- ' bg-sky-300 ” klass ställer in bakgrundsfärgen för -behållaren till himmel.
- ' rutnät ” klass möjliggör en rutnätslayout.
- ' rutnät-rader-3 ” klass sätter radnumret i rutnätet till 3.
- ' rutnät-flöde-kol ” klass definierar flödet av rutnätsobjekt i kolumner.
- ' m-5 ” klass lägger till 5 enheter marginal runt behållaren.
- ' mellanslag-y-4 ” klass lägger till ett vertikalt avstånd på 4 enheter mellan de underordnade
-elementen i behållaren.
- ' p-4 ” klass lägger till 4 enheter stoppning till innehållet inuti behållaren.
- ' motivera-mellan klass justerar de underordnade elementen i behållaren och fördelar dem jämnt.
I
-elementen:
- ' objekt-ingen ” klass tillämpar ingen position på elementet och visar elementet på dess standardposition i behållaren.
- ' objekt-vänster-överst klass placerar
-elementet i behållarens övre vänstra hörn.
- ' objekt-vänster ” klass justerar elementet mot behållarens vänstra kant och håller det vertikalt centrerat.
- ' objekt-vänster-botten ” klass placerar
-elementet i det nedre vänstra hörnet av dess behållare.
- ' objekt-top ” klass placerar elementet i den övre kanten av dess behållare och placerar det horisontellt centrerat.
- ' objekt-centrum ” klass placerar elementet i mitten av behållaren och håller det horisontellt och vertikalt centrerat.
- ' objekt-botten ” klass placerar elementet i bottenkanten av dess behållare och håller det horisontellt centrerat.
- ' objekt-höger-topp klass placerar
-elementet i behållarens övre högra hörn.
- ' objekt-rätt ” klass placerar elementet till den högra kanten av dess behållare och håller det vertikalt centrerat.
- ' objekt-höger-nederst ” klass placerar elementet i behållarens nedre högra hörn.
Produktion
På webbsidan ovan kan det observeras att allt innehåll i det ersatta elementet har placerats framgångsrikt.
Slutsats
För att placera ersatta element i en container i Tailwind, ' objekt-
” verktyg används med de önskade elementen, såsom bilder. Användare måste definiera den specifika positionen eller sidan, dvs. vänster, höger eller mitt i verktyget 'objekt- ' för att placera de ersatta elementen. Den här artikeln har illustrerat metoden för att placera ersatta element i en container i Tailwind CSS.