I Tailwind CSS er erstattede elementer elementene hvis innhold er erstattet av en ekstern ressurs, for eksempel bilder og videoer. Noen ganger møter brukerne en utfordring med å plassere et erstattet element i beholderen. Dette er fordi disse elementene kan flyte over beholderen hvis størrelsen er større enn den tilgjengelige plassen. Tailwind CSS gir verktøyklasser for å kontrollere hvordan innholdet i et erstattet element er plassert og justert i beholderen.
Denne artikkelen vil illustrere metoden for å plassere erstattede elementer i en beholder i Tailwind CSS.
Hvordan plassere erstattede elementer i en container i medvind?
For å plassere erstattede elementer i en beholder i Tailwind, lag et HTML-program og bruk ' objekt-
Syntaks
< element klasse = 'objekt-
Eksempel
I dette eksemplet skal vi lage en beholder og bruke alle ' objekt- ' (bilde) elementer for å spesifisere deres erstattede posisjon i beholderen:
< kropp >
< 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-topp 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-bunn w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-topp w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-senter w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasse = 'objekt-ingen objekt-bunn 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øyre-topp 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øyre 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øyre-bunn w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
kropp >
Her, i det overordnede
- ' bg-sky-300 ”-klassen setter bakgrunnsfargen til -beholderen til himmelen.
- ' Nett ”-klassen muliggjør et rutenettoppsett.
- ' rutenett-rader-3 klasse setter radnummeret i rutenettet til 3.
- ' grid-flow-col Klasse definerer flyten av rutenettelementer i kolonner.
- ' m-5 ” klasse legger til 5 enheter margin rundt beholderen.
- ' space-y-4 ” klasse legger til en vertikal avstand på 4 enheter mellom de underordnede
-elementene i beholderen.
- ' s-4 ”-klassen legger til 4 enheter med polstring til innholdet inne i beholderen.
- ' rettferdiggjøre-mellom ”-klassen justerer de underordnede elementene i beholderen og fordeler dem jevnt.
I
-elementene:
- ' objekt-ingen ”-klassen bruker ingen posisjon på elementet og viser elementet på standardposisjonen i beholderen.
- ' objekt-venstre-topp ”-klassen plasserer
-elementet til beholderens øverste venstre hjørne.
- ' objekt-venstre ” klasse justerer elementet til venstre kant av beholderen og holder det vertikalt sentrert.
- ' objekt-venstre-bunn ”-klassen plasserer
-elementet i nederste venstre hjørne av beholderen.
- ' objekt-topp ” klasse plasserer elementet i den øvre kanten av beholderen og setter det horisontalt sentrert.
- ' objekt-senter ” klasse plasserer elementet i midten av beholderen og holder det horisontalt og vertikalt sentrert.
- ' objekt-bunn ” klasse plasserer elementet i bunnkanten av beholderen og holder det horisontalt sentrert.
- ' objekt-høyre-topp ”-klassen plasserer
-elementet i beholderens øvre høyre hjørne.
- ' objekt-rett ” klasse plasserer elementet til høyre kant av beholderen og holder det vertikalt sentrert.
- ' objekt-høyre-nederst ”-klassen plasserer elementet i beholderens nedre høyre hjørne.
Produksjon
På nettsiden ovenfor kan det observeres at alt innholdet til det erstattede elementet er vellykket plassert.
Konklusjon
For å plassere erstattede elementer i en beholder i Tailwind, ' objekt-
”-verktøy brukes med de ønskede elementene, for eksempel bilder. Brukere må definere den spesifikke posisjonen eller siden, dvs. venstre, høyre eller senter i «objekt- »-verktøyet for å plassere de erstattede elementene. Denne artikkelen har illustrert metoden for å plassere erstattede elementer i en beholder i Tailwind CSS.