V CSS Tailwind sú nahradené prvky prvky, ktorých obsah je nahradený externým zdrojom, ako sú obrázky a videá. Niekedy používatelia čelia výzve umiestniť vymenený prvok do kontajnera. Tieto prvky totiž môžu preplniť kontajner, ak je ich veľkosť väčšia ako dostupný priestor. Tailwind CSS poskytuje pomocné triedy na ovládanie toho, ako je obsah nahradeného prvku umiestnený a zarovnaný v kontajneri.
Tento článok ilustruje spôsob umiestnenia nahradených prvkov v kontajneri v CSS Tailwind.
Ako umiestniť vymenené prvky v kontajneri v Tailwind?
Ak chcete umiestniť nahradené prvky do kontajnera v Tailwinde, vytvorte program HTML a použite „ objekt-
Syntax
< element trieda = 'objekt-
Príklad
V tomto príklade vytvoríme kontajner a použijeme všetky „ objekt- ” (obrázok) prvkov na určenie ich nahradenej pozície v kontajneri:
< telo >
< div trieda = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img trieda = '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 trieda = 'object-none object-left w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img trieda = '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 trieda = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img trieda = 'objekt-žiadny objekt-stred w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img trieda = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img trieda = 'object-none object-right-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img trieda = 'objekt-žiadny objekt-vpravo w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img trieda = '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 >
telo >
Tu v nadradenom prvku
- “ bg-sky-300 ” nastaví farbu pozadia kontajnera na oblohu.
- “ mriežka ” umožňuje rozloženie mriežky.
- “ grid-rows-3 ” class nastaví počet riadkov v mriežke na 3.
- “ grid-flow-col ” trieda definuje tok položiek mriežky v stĺpcoch.
- “ m-5 “ trieda pridáva 5 jednotiek okraja okolo kontajnera.
- “ medzera-y-4 ” trieda pridáva medzi podradené prvky
v kontajneri zvislú vzdialenosť 4 jednotiek.
- “ p-4 “ trieda pridáva 4 jednotky výplne k obsahu vnútri kontajnera.
- “ ospravedlniť-medzi ” trieda zarovná podradené prvky v kontajneri a rovnomerne ich rozmiestni.
V prvkoch
:
- “ objekt-žiadny ” nepoužije na prvok žiadnu pozíciu a zobrazí prvok na jeho predvolenej pozícii v kontajneri.
- “ objekt-vľavo-hore ” umiestni prvok
do ľavého horného rohu kontajnera.
- “ objekt-vľavo ” zarovná prvok k ľavému okraju kontajnera a ponechá ho vertikálne vycentrovaný.
- “ objekt-vľavo-dole ” umiestni prvok
do ľavého dolného rohu jeho kontajnera.
- “ objekt-top ” umiestni prvok na horný okraj jeho kontajnera a nastaví ho vodorovne na stred.
- “ objektové centrum ” trieda umiestni prvok do stredu kontajnera a udržiava ho horizontálne a vertikálne vycentrovaný.
- “ objekt-dole ” trieda umiestni prvok na spodný okraj jeho kontajnera a ponechá ho vodorovne vycentrovaný.
- “ objekt-vpravo-hore ” umiestni prvok
do pravého horného rohu kontajnera.
- “ objekt-pravý ” trieda umiestni prvok k pravému okraju jeho kontajnera a ponechá ho vertikálne vycentrovaný.
- “ objekt-vpravo-dole ” umiestni prvok do pravého dolného rohu kontajnera.
Výkon
Na vyššie uvedenej webovej stránke je možné pozorovať, že všetok obsah nahradeného prvku bol úspešne umiestnený.
Záver
Ak chcete umiestniť nahradené prvky v rámci kontajnera v Tailwinde, „ objekt-
” nástroje sa používajú s požadovanými prvkami, ako sú obrázky. Používatelia musia definovať konkrétnu polohu alebo stranu, tj vľavo, vpravo alebo v strede v nástroji „object- “, aby umiestnili nahradené prvky. Tento článok ilustruje spôsob umiestnenia nahradených prvkov v kontajneri v CSS Tailwind.