En Tailwind CSS, los elementos reemplazados son los elementos cuyo contenido se reemplaza por un recurso externo, como imágenes y videos. A veces, los usuarios enfrentan el desafío de colocar un elemento reemplazado dentro del contenedor. Esto se debe a que estos elementos pueden desbordar el contenedor si su tamaño es mayor que el espacio disponible. Tailwind CSS proporciona clases de utilidad para controlar cómo se coloca y alinea el contenido de un elemento reemplazado dentro del contenedor.
Este artículo ilustrará el método para colocar elementos reemplazados dentro de un contenedor en Tailwind CSS.
¿Cómo colocar elementos reemplazados dentro de un contenedor en Tailwind?
Para colocar elementos reemplazados dentro de un contenedor en Tailwind, haga un programa HTML y use el ' objeto-
Sintaxis
< elemento clase = 'objeto-
Ejemplo
En este ejemplo, haremos un contenedor y usaremos todos los ' objeto- ” (imagen) elementos para especificar su posición reemplazada dentro del contenedor:
< cuerpo >
< división clase = 'bg-sky-300 cuadrícula cuadrícula-filas-3 cuadrícula-flujo-col m-5 espacio-y-4 p-4 justificar-entre' >
< imagen clase = 'objeto-ninguno objeto-izquierda-superior w-24 h-24 my-4' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imagen clase = 'objeto-ninguno objeto-izquierda w-24 h-24' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imagen clase = 'objeto-ninguno objeto-izquierda-abajo w-24 h-24' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imagen clase = 'objeto-ninguno objeto-superior w-24 h-24' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imagen clase = 'objeto-ninguno objeto-centro w-24 h-24' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imagen clase = 'objeto-ninguno objeto-fondo w-24 h-24' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imagen clase = 'objeto-ninguno objeto-derecha-superior w-24 h-24' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imagen clase = 'objeto-ninguno objeto-derecho w-24 h-24' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< imagen clase = 'objeto-ninguno objeto-derecha-abajo w-24 h-24' origen = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
división >
cuerpo >
Aquí, en el elemento padre
- “ bg-sky-300 La clase ” establece el color de fondo del contenedor en el cielo.
- “ red La clase ” permite un diseño de cuadrícula.
- “ cuadrícula-filas-3 La clase ” establece el número de filas en la cuadrícula en 3.
- “ cuadrícula-flujo-col La clase ” define el flujo de elementos de cuadrícula en columnas.
- “ m-5 La clase ” agrega 5 unidades de margen alrededor del contenedor.
- “ espacio-y-4 La clase ” agrega un espacio vertical de 4 unidades entre los elementos secundarios
dentro del contenedor.
- “ p-4 La clase ” agrega 4 unidades de relleno al contenido dentro del contenedor.
- “ justificar-entre La clase ” alinea los elementos secundarios dentro del contenedor y los distribuye uniformemente.
En los elementos
:
- “ objeto-ninguno La clase ” no aplica ninguna posición al elemento y muestra el elemento en su posición predeterminada en el contenedor.
- “ objeto-izquierda-arriba ” coloca el elemento
en la esquina superior izquierda de su contenedor.
- “ objeto-izquierda La clase ” alinea el elemento con el borde izquierdo del contenedor y lo mantiene centrado verticalmente.
- “ objeto-izquierda-abajo ” coloca el elemento
en la esquina inferior izquierda de su contenedor.
- “ parte superior del objeto La clase ” coloca el elemento en el borde superior de su contenedor y lo establece centrado horizontalmente.
- “ centro de objetos La clase ” coloca el elemento en el centro del contenedor y lo mantiene centrado horizontal y verticalmente.
- “ fondo de objeto La clase ” coloca el elemento en el borde inferior de su contenedor y lo mantiene centrado horizontalmente.
- “ objeto-derecha-arriba ” coloca el elemento
en la esquina superior derecha del contenedor.
- “ objeto-derecho La clase ” coloca el elemento en el borde derecho de su contenedor y lo mantiene centrado verticalmente.
- “ objeto-abajo-a-la-derecha La clase ” coloca el elemento en la esquina inferior derecha de su contenedor.
Producción
En la página web anterior, se puede observar que todo el contenido del elemento reemplazado se ha posicionado correctamente.
Conclusión
Para colocar elementos reemplazados dentro de un contenedor en Tailwind, el ' objeto-
Se utilizan utilidades con los elementos deseados, como imágenes. Los usuarios deben definir la posición o el lado específico, es decir, izquierda, derecha o centro en la utilidad 'objeto- ' para colocar los elementos reemplazados. Este artículo ha ilustrado el método para colocar elementos reemplazados dentro de un contenedor en Tailwind CSS.