I Tailwind CSS er erstattede elementer de elementer, hvis indhold erstattes af en ekstern ressource, såsom billeder og videoer. Nogle gange står brugerne over for en udfordring med at placere et udskiftet element i beholderen. Dette skyldes, at disse elementer kan flyde over beholderen, hvis deres størrelse er større end den tilgængelige plads. Tailwind CSS leverer hjælpeklasser til at kontrollere, hvordan indholdet af et erstattet element placeres og justeres i containeren.
Denne artikel vil illustrere metoden til at placere erstattede elementer i en container i Tailwind CSS.
Hvordan placeres udskiftede elementer i en container i medvind?
For at placere erstattede elementer i en container i Tailwind skal du lave et HTML-program og bruge ' objekt-
Syntaks
< element klasse = 'objekt-
Eksempel
I dette eksempel vil vi lave en beholder og bruge alle ' objekt- ” (billede) elementer for at angive deres udskiftede position i beholderen:
< legeme >
< div klasse = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img klasse = 'objekt-ingen objekt-venstre-top w-24 h-24 min-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-venstre w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-venstre-bund w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-center w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-bund w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-højre-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-højre w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-højre-bund w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
legeme >
Her i det overordnede
- “ bg-sky-300 ” klasse indstiller baggrundsfarven for -beholderen til himlen.
- “ gitter ” klasse muliggør et gitterlayout.
- “ gitter-rækker-3 ” klasse indstiller rækkenummeret i gitteret til 3.
- “ grid-flow-col ” klasse definerer flowet af gitterelementer i kolonner.
- “ m-5 ” klasse tilføjer 5 enheder margen rundt om beholderen.
- “ mellemrum-y-4 ” klasse tilføjer en lodret afstand på 4 enheder mellem de underordnede
-elementer i beholderen.
- “ s-4 ” klasse tilføjer 4 enheder polstring til indholdet inde i beholderen.
- “ retfærdiggøre-mellem ” klasse justerer de underordnede elementer i beholderen og fordeler dem jævnt.
I
-elementerne:
- “ objekt-ingen Klassen anvender ingen position på elementet og viser elementet på dets standardposition i containeren.
- “ objekt-venstre-top ”-klassen placerer
-elementet i dets containers øverste venstre hjørne.
- “ objekt-venstre ” klasse justerer elementet til venstre kant af beholderen og holder det lodret centreret.
- “ objekt-venstre-nederst ”-klassen placerer
-elementet i nederste venstre hjørne af dets container.
- “ objekt-top ” klasse placerer elementet i den øverste kant af dets beholder og sætter det vandret centreret.
- “ objekt-center ” klasse placerer elementet i midten af beholderen og holder det vandret og lodret centreret.
- “ objekt-bund ” klasse placerer elementet i den nederste kant af sin beholder og holder det vandret centreret.
- “ objekt-højre-top ”-klassen placerer
-elementet i containerens øverste højre hjørne.
- “ objekt-ret ” klasse placerer elementet til højre kant af dets beholder og holder det lodret centreret.
- “ objekt-højre-nederst ” klasse placerer elementet i dets containers nederste højre hjørne.
Produktion
På ovenstående webside kan det ses, at alt det erstattede elements indhold er blevet positioneret med succes.
Konklusion
For at placere udskiftede elementer i en container i Tailwind, skal ' objekt-
” hjælpeprogrammer bruges med de ønskede elementer, såsom billeder. Brugere skal definere den specifikke position eller side, dvs. venstre, højre eller center i værktøjet 'objekt- ' for at placere de erstattede elementer. Denne artikel har illustreret metoden til at placere erstattede elementer i en container i Tailwind CSS.