V Tailwind CSS jsou nahrazené prvky prvky, jejichž obsah je nahrazen externím zdrojem, jako jsou obrázky a videa. Někdy uživatelé čelí výzvě umístit nahrazený prvek do kontejneru. Tyto prvky totiž mohou přetékat kontejner, pokud je jejich velikost větší než dostupný prostor. Tailwind CSS poskytuje pomocné třídy, které určují, jak je obsah nahrazovaného prvku umístěn a zarovnán v kontejneru.
Tento článek ilustruje způsob umístění nahrazených prvků v kontejneru v Tailwind CSS.
Jak umístit vyměněné prvky do kontejneru ve službě Tailwind?
Chcete-li umístit nahrazené prvky do kontejneru v Tailwindu, vytvořte program HTML a použijte „ objekt-
Syntax
< živel třída = 'objekt-
Příklad
V tomto příkladu vytvoříme kontejner a použijeme všechny „ objekt- ” (obrázek) prvků k určení jejich nahrazené pozice v kontejneru:
< tělo >
< div třída = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img třída = 'object-none object-left-top w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img třída = 'object-none object-left w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img třída = 'object-none object-left-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img třída = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img třída = 'objekt-žádný objekt-centrum w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img třída = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img třída = 'objekt-žádný objekt-vpravo-nahoře w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img třída = 'objekt-žádný objekt-vpravo w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img třída = 'object-none object-right-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
tělo >
Zde v nadřazeném prvku
- “ bg-sky-300 ” nastaví barvu pozadí kontejneru na oblohu.
- “ mřížka ” umožňuje rozvržení mřížky.
- “ mřížka-řádky-3 ” class nastaví počet řádků v mřížce na 3.
- “ grid-flow-col ” třída definuje tok položek mřížky ve sloupcích.
- “ m-5 “ třída přidá 5 jednotek okraje kolem kontejneru.
- “ mezera-y-4 ” přidá svislou mezeru 4 jednotek mezi podřízené prvky
v kontejneru.
- “ p-4 ” třída přidá k obsahu uvnitř kontejneru 4 jednotky výplně.
- “ ospravedlnit-mezi ” třída zarovná podřízené prvky v kontejneru a rovnoměrně je rozmístí.
V prvcích
:
- “ objekt-žádný ” nepoužije na prvek žádnou pozici a zobrazí prvek na jeho výchozí pozici v kontejneru.
- “ objekt-vlevo-nahoře ” třída umístí prvek
do levého horního rohu kontejneru.
- “ objekt-levý ” třída zarovná prvek k levému okraji kontejneru a udržuje jej svisle na střed.
- “ objekt-vlevo-dole Třída ” umístí prvek
do levého dolního rohu jeho kontejneru.
- “ objekt-top Třída ” umístí prvek na horní okraj jeho kontejneru a nastaví jej vodorovně na střed.
- “ objektové centrum ” třída umístí prvek do středu kontejneru a udržuje jej vodorovně a svisle na střed.
- “ objekt-dole Třída ” umístí prvek na spodní okraj jeho kontejneru a udržuje jej vodorovně vystředěný.
- “ objekt-vpravo-nahoře ” třída umístí prvek
do pravého horního rohu kontejneru.
- “ objekt-pravý Třída ” umístí prvek k pravému okraji jeho kontejneru a udržuje jej svisle vycentrovaný.
- “ objekt-vpravo-dole ” třída umístí prvek do pravého dolního rohu kontejneru.
Výstup
Na výše uvedené webové stránce lze pozorovat, že veškerý obsah nahrazeného prvku byl úspěšně umístěn.
Závěr
Chcete-li umístit nahrazené prvky do kontejneru v Tailwind, „ objekt-
” nástroje se používají s požadovanými prvky, jako jsou obrázky. Uživatelé musí definovat konkrétní pozici nebo stranu, tj. vlevo, vpravo nebo uprostřed v obslužném programu „object- “, aby mohli umístit nahrazené prvky. Tento článek ilustruje způsob umístění nahrazených prvků v kontejneru v Tailwind CSS.