В Tailwind CSS замененные элементы — это элементы, содержимое которых заменяется внешним ресурсом, например изображениями и видео. Иногда пользователи сталкиваются с проблемой размещения замененного элемента в контейнере. Это связано с тем, что эти элементы могут переполнить контейнер, если их размер превышает доступное пространство. Tailwind CSS предоставляет служебные классы для управления тем, как содержимое заменяемого элемента позиционируется и выравнивается внутри контейнера.
В этой статье будет показан метод позиционирования замененных элементов внутри контейнера в Tailwind CSS.
Как разместить замененные элементы внутри контейнера в Tailwind?
Чтобы разместить замененные элементы в контейнере в Tailwind, создайте программу HTML и используйте « объект-<позиция/сторона> утилиты с нужными элементами. Требуется определить конкретную сторону, то есть левую, правую или центральную, в утилите «object-
Синтаксис
< элемент сорт '=' 'объект-<позиция/сторона>...' > ... элемент >
Пример
В этом примере мы создадим контейнер и будем использовать все « объект-<позиция/сторона> ” утилиты с “ <изображение> ” (изображение), чтобы указать их замененное положение внутри контейнера:
< тело >
< див сорт '=' 'bg-sky-300 сетка сетка-строки-3 сетка-поток-столбец m-5 пробел-y-4 p-4 выравнивание-между' >
< изображение сорт '=' 'объект-нет объект-слева-вверху w-24 h-24 my-4' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< изображение сорт '=' 'объект-нет объект-слева w-24 h-24' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< изображение сорт '=' 'объект-нет объект-слева-внизу w-24 h-24' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< изображение сорт '=' 'объект-нет объект-верхняя часть w-24 h-24' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< изображение сорт '=' 'объект-нет объект-центр w-24 h-24' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< изображение сорт '=' 'объект-нет объект-дно w-24 h-24' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< изображение сорт '=' 'объект-нет объект-справа-вверху w-24 h-24' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< изображение сорт '=' 'объект-нет объект-право w-24 h-24' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< изображение сорт '=' 'объект-нет объект-справа-снизу w-24 h-24' источник '=' 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
див >
тело >
Здесь, в родительском элементе
- “ бг-небо-300 » устанавливает цвет фона контейнера на небо.
- “ сетка ” включает макет сетки.
- “ сетка-строки-3 ” устанавливает количество строк в сетке равным 3.
- “ сетка-поток-столбец ” определяет поток элементов сетки в столбцах.
- “ м-5 ” добавляет 5 единиц поля вокруг контейнера.
- “ пространство-y-4 ” добавляет вертикальное расстояние в 4 единицы между дочерними элементами
внутри контейнера.
- “ р-4 ” добавляет 4 единицы заполнения к содержимому внутри контейнера.
- “ оправдать-между » выравнивает дочерние элементы внутри контейнера и равномерно распределяет их.
В элементах
:
- “ объект-нет ” не применяет к элементу никакой позиции и отображает элемент в позиции по умолчанию в контейнере.
- “ объект-слева-сверху » размещает элемент
в верхнем левом углу своего контейнера.
- “ объект слева » выравнивает элемент по левому краю контейнера и удерживает его по центру по вертикали.
- “ объект-слева-снизу ” помещает элемент
в левый нижний угол своего контейнера.
- “ вершина объекта ” размещает элемент на верхнем краю контейнера и устанавливает его по центру по горизонтали.
- “ объект-центр ” класс позиционирует элемент в центре контейнера и удерживает его по центру по горизонтали и вертикали.
- “ объект-дно » размещает элемент у нижнего края своего контейнера и удерживает его по центру по горизонтали.
- “ объект-справа-вверху » размещает элемент
в верхнем правом углу контейнера.
- “ объектное право » позиционирует элемент на правом краю своего контейнера и удерживает его по центру по вертикали.
- “ объект справа внизу » помещает элемент в правый нижний угол своего контейнера.
Выход
На приведенной выше веб-странице можно заметить, что все содержимое замененного элемента было успешно позиционировано.
Заключение
Чтобы разместить замененные элементы в контейнере в Tailwind, « объект-<позиция/сторона> Утилиты используются с нужными элементами, например изображениями. Пользователям необходимо определить конкретное положение или сторону, т. е. слева, справа или по центру, в утилите «object-
», чтобы расположить замененные элементы. В этой статье показан метод позиционирования замененных элементов внутри контейнера в Tailwind CSS.