În Tailwind CSS, elementele înlocuite sunt elementele al căror conținut este înlocuit cu o resursă externă, cum ar fi imagini și videoclipuri. Uneori, utilizatorii se confruntă cu o provocare de a poziționa un element înlocuit în interiorul containerului. Acest lucru se datorează faptului că aceste elemente pot deborda containerul dacă dimensiunea lor este mai mare decât spațiul disponibil. Tailwind CSS oferă clase de utilitate pentru a controla modul în care conținutul unui element înlocuit este poziționat și aliniat în interiorul containerului.
Acest articol va ilustra metoda de poziționare a elementelor înlocuite într-un container în CSS Tailwind.
Cum să poziționați elementele înlocuite într-un container în Tailwind?
Pentru a poziționa elementele înlocuite într-un container în Tailwind, creați un program HTML și utilizați „ obiect-
Sintaxă
< element clasă = 'obiect-
Exemplu
În acest exemplu, vom face un container și vom folosi toate „ obiect- ” (imagine) elemente pentru a specifica poziția lor înlocuită în interiorul containerului:
< corp >
< div clasă = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-intre' >
< img clasă = „obiect-niciun obiect-stânga-sus w-24 h-24 my-4” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
< img clasă = „obiect-niciun obiect-stânga w-24 h-24” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
< img clasă = „obiect-niciun obiect-stânga-jos w-24 h-24” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
< img clasă = „obiect-niciun obiect-top w-24 h-24” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
< img clasă = „obiect-niciun centru obiect w-24 h-24” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
< img clasă = „obiect-niciun obiect-de jos w-24 h-24” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
< img clasă = „obiect-niciun obiect-dreapta-sus w-24 h-24” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
< img clasă = „obiect-niciun obiect-dreapta w-24 h-24” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
< img clasă = „obiect-niciun obiect-dreapta-jos w-24 h-24” src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg” >
div >
corp >
Aici, în elementul părinte
- „ bg-sky-300 ” class setează culoarea de fundal a containerului la cer.
- „ grilă ”clasa permite un aspect al grilei.
- „ grilă-rânduri-3 ” clasa setează numărul rândurilor din grilă la 3.
- „ grid-flow-col ” definește fluxul elementelor grilei în coloane.
- „ m-5 ” clasa adaugă 5 unități de marjă în jurul containerului.
- „ spațiu-y-4 ” clasa adaugă o distanță verticală de 4 unități între elementele
copil din container.
- „ p-4 ” clasa adaugă 4 unități de umplutură la conținutul din interiorul containerului.
- „ justifica-între ” clasa aliniază elementele copil în interiorul containerului și le distribuie uniform.
În elementele
:
- „ obiect-niciunul ” clasa nu aplică nicio poziție elementului și afișează elementul în poziția sa implicită în container.
- „ obiect-stânga-sus ” clasa poziționează elementul
în colțul din stânga sus al containerului său.
- „ obiect-stânga ” clasa aliniază elementul la marginea stângă a containerului și îl menține centrat vertical.
- „ obiect-stânga-jos ” clasa poziționează elementul
în colțul din stânga jos al containerului său.
- „ obiect-top clasa ” poziționează elementul la marginea de sus a containerului său și îl setează centrat orizontal.
- „ centru obiect ” clasa poziționează elementul în centrul containerului și îl menține centrat orizontal și vertical.
- „ obiect-fund clasa ” poziționează elementul la marginea de jos a containerului său și îl menține centrat orizontal.
- „ obiect-dreapta-sus ” clasa poziționează elementul
în colțul din dreapta sus al containerului.
- „ obiect-drept ” clasa poziționează elementul pe marginea dreaptă a containerului său și îl menține centrat vertical.
- „ obiect-dreapta-jos ” clasa poziționează elementul în colțul din dreapta jos al containerului său.
Ieșire
În pagina web de mai sus, se poate observa că tot conținutul elementului înlocuit a fost poziționat cu succes.
Concluzie
Pentru a poziționa elementele înlocuite într-un container în Tailwind, „ obiect-