Tailwind CSS aizstātie elementi ir elementi, kuru saturs ir aizstāts ar ārēju resursu, piemēram, attēliem un videoklipiem. Dažreiz lietotāji saskaras ar izaicinājumu novietot aizstāto elementu konteinerā. Tas ir tāpēc, ka šie elementi var pārplūst konteinerā, ja to izmērs ir lielāks par pieejamo vietu. Tailwind CSS nodrošina utilītu klases, lai kontrolētu, kā aizstātā elementa saturs tiek novietots un līdzināts konteinerā.
Šajā rakstā ir ilustrēta metode, kā Tailwind CSS konteinerā novietot aizstātos elementus.
Kā novietot nomainītos elementus konteinerā aizmugurējā vējā?
Lai novietotu aizstātos elementus konteinerā programmā Tailwind, izveidojiet HTML programmu un izmantojiet ' objekts-
Sintakse
< elements klasē = 'objekts-
Piemērs
Šajā piemērā mēs izveidosim konteineru un izmantosim visus “ objekts- ” (attēla) elementi, lai norādītu to aizstāto pozīciju konteinerā:
< ķermeni >
< div klasē = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-starp' >
< img klasē = 'objekts-none objekts-kreisais-augš w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasē = 'objekts-nav objekts-pa kreisi w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasē = 'objekts-nav objekts-left-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasē = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasē = 'objekts-nav objekta centrs w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasē = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasē = 'objekts-nav objekts-labais augšējais w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasē = 'objekts-nav objekts-labais w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasē = 'objekts-nav objekts-labais-apakšā w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
ķermeni >
Šeit, vecākelementā
- ' bg-sky-300 ” klase iestata konteinera fona krāsu uz debesīm.
- ' režģis ” klase nodrošina režģa izkārtojumu.
- ' režģis-rindas-3 ” klase iestata rindu numuru režģī uz 3.
- ' grid-flow-col ” klase definē režģa vienumu plūsmu kolonnās.
- ' m-5 ” klase pievieno 5 rezerves vienības ap konteineru.
- ' atstarpe-y-4 ” klase pievieno 4 vienību vertikālo atstarpi starp pakārtotajiem
elementiem konteinerā.
- ' p-4 ” klase konteinera saturam pievieno 4 polsterējuma vienības.
- ' attaisnot-starp ” klase izlīdzina pakārtotos elementus konteinerā un vienmērīgi sadala tos.
Elementos
:
- ' objekts-nav ” klase elementam nepiemēro nevienu pozīciju un parāda elementu tā noklusējuma pozīcijā konteinerā.
- ' objekts-kreisais-augšpusē ” klase novieto
elementu konteinera augšējā kreisajā stūrī.
- ' objekts-pa kreisi ” klase pielīdzina elementu konteinera kreisajai malai un saglabā to vertikāli centrā.
- ' objekts-kreisais-apakšā ” klase novieto
elementu konteinera apakšējā kreisajā stūrī.
- ' objekts-top ” klase novieto elementu konteinera augšējā malā un iestata to horizontāli centrā.
- ' objektu centrs ” klase novieto elementu konteinera centrā un notur to horizontāli un vertikāli centrā.
- ' objekts-apakšā ” klase novieto elementu konteinera apakšējā malā un notur to horizontāli centrā.
- ' objekts-labais-augš ” klase novieto
elementu konteinera augšējā labajā stūrī.
- ' objekts-labais ” klase novieto elementu konteinera labajā malā un tur to vertikāli centrētu.
- ' objekts-labais-apakšā ” klase novieto elementu tā konteinera apakšējā labajā stūrī.
Izvade
Iepriekš minētajā tīmekļa lapā var novērot, ka viss aizstātā elementa saturs ir veiksmīgi pozicionēts.
Secinājums
Lai novietotu aizstātos elementus konteinerā aizmugurējā vējā, “ objekts-
” utilītas tiek izmantotas ar vēlamajiem elementiem, piemēram, attēliem. Lai novietotu aizstātos elementus, lietotājiem ir jādefinē konkrēta pozīcija vai mala, t.i., pa kreisi, pa labi vai centrs utilītprogrammā “object- ”. Šajā rakstā ir ilustrēta metode, kā Tailwind CSS konteinerā novietot aizstātos elementus.