В Tailwind CSS заменените елементи са елементите, чието съдържание е заменено от външен ресурс, като изображения и видеоклипове. Понякога потребителите са изправени пред предизвикателство да позиционират заменен елемент в контейнера. Това е така, защото тези елементи могат да препълнят контейнера, ако размерът им е по-голям от наличното пространство. Tailwind CSS предоставя помощни класове за контрол на това как съдържанието на заместен елемент се позиционира и подравнява в контейнера.
Тази статия ще илюстрира метода за позициониране на заменени елементи в контейнер в Tailwind CSS.
Как да позиционирате заменените елементи в контейнер в Tailwind?
За да позиционирате заменените елементи в контейнер в Tailwind, направете HTML програма и използвайте „ обект-<позиция/страна> ” помощни програми с желаните елементи. Изисква се да се дефинира конкретната страна, т.е. ляво, дясно или център в помощната програма „object-
Синтаксис
< елемент клас = 'обект-<позиция/страна> ...' > ... елемент >
Пример
В този пример ще направим контейнер и ще използваме всички „ обект-<позиция/страна> ' помощни програми с ' ” (изображение), за да посочите тяхната заменена позиция в контейнера:
< тяло >
< див клас = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img клас = '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 клас = 'object-none object-left w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img клас = '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 клас = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img клас = 'object-none object-center w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img клас = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img клас = '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 клас = 'object-none object-right w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img клас = 'object-none object-right-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
див >
тяло >
Тук, в родителския елемент
- “ бг-небе-300 ” клас задава цвета на фона на контейнера на небе.
- “ решетка ” клас позволява мрежово оформление.
- “ grid-rows-3 ” клас задава броя на редовете в мрежата на 3.
- “ grid-flow-col ” клас дефинира потока от елементи на мрежата в колони.
- “ м-5 ” добавя 5 единици марж около контейнера.
- “ пространство-y-4 ” добавя вертикално разстояние от 4 единици между дъщерните
елементи в контейнера.
- “ p-4 ” добавя 4 единици подложка към съдържанието вътре в контейнера.
- “ justify-between ” клас подравнява дъщерните елементи в контейнера и ги разпределя равномерно.
В елементите
:
- “ обект-няма ” класът не прилага никаква позиция към елемента и показва елемента в позицията му по подразбиране в контейнера.
- “ обект-ляво-горе ” позиционира елемента
в горния ляв ъгъл на неговия контейнер.
- “ обект-ляво ” клас подравнява елемента към левия ръб на контейнера и го поддържа вертикално центриран.
- “ обект-ляво-долу ” позиционира елемента
в долния ляв ъгъл на неговия контейнер.
- “ обект-топ ” позиционира елемента в горния ръб на неговия контейнер и го поставя хоризонтално центриран.
- “ обект-център ” позиционира елемента в центъра на контейнера и го поддържа хоризонтално и вертикално центриран.
- “ обект-дъно ” позиционира елемента в долния ръб на неговия контейнер и го държи хоризонтално центриран.
- “ обект-дясно-горе ” позиционира елемента
в горния десен ъгъл на контейнера.
- “ обектно право ” позиционира елемента до десния ръб на неговия контейнер и го държи вертикално центриран.
- “ обект-дясно-долу ” позиционира елемента в долния десен ъгъл на неговия контейнер.
Изход
В горната уеб страница може да се види, че цялото съдържание на заменения елемент е позиционирано успешно.
Заключение
За да позиционирате заменените елементи в контейнер в Tailwind, „ обект-<позиция/страна> ” помощните програми се използват с желаните елементи, като изображения. Потребителите трябва да дефинират конкретната позиция или страна, т.е. ляво, дясно или център в помощната програма „object-
“, за да позиционират заменените елементи. Тази статия илюстрира метода за позициониране на заменени елементи в контейнер в Tailwind CSS.