En HTML, las imágenes se utilizan para diferentes propósitos y generalmente se muestran en forma vertical por separado. Sin embargo, a veces, es posible que deba colocar imágenes una al lado de la otra para crear un diseño elegante o para cumplir con cualquier otro propósito de desarrollo web.

En este artículo, discutiremos cómo colocar dos divs uno al lado del otro en CSS usando:

• flotar
• red
• doblar

Empecemos!

Método 1: Coloque dos divs uno al lado del otro en CSS usando Float

En CSS, el "flotar"La propiedad especifica la dirección flotante de un elemento. Coloca un elemento en el lado derecho o izquierdo del contenedor, permitiendo que los elementos en línea y de texto lo envuelvan.

Sintaxis

La sintaxis de la propiedad flotante es:

flotante: ninguno | izquierda | derecha

Aquí está la descripción relacionada con el valor mencionado anteriormente de la propiedad flotante:

• ninguno: Se usa para no flotar.
• izquierda: Se usa para flotar elementos en el lado izquierdo.
• bien: Se usa para flotar elementos en el lado derecho.

Utilizando el "flotar"Propiedad, también puede colocar imágenes una al lado de la otra. Pasemos al ejemplo de colocar imágenes una al lado de la otra.

Ejemplo 1: Coloque dos imágenes una al lado de la otra utilizando la propiedad flotante

Aquí, hemos agregado un encabezado usando

y creó dos divs y le asignaron las fuentes de imagen.

Html

Coloque las imágenes una al lado de la otra con CSS Float

En CSS, usaremos ".div"Para acceder a ambos divs que hemos creado en el archivo HTML. A continuación, asigne el valor de la propiedad flotante como "izquierda". Como resultado, el efecto se aplicará a nuestros dos contenedores.

CSS

.div
flotador izquierdo;

Como puede ver, hemos colocado con éxito imágenes una al lado de la otra:

Ejemplo: coloque dos imágenes una al lado de la otra con espacio

Si desea crear espacio entre estas dos imágenes y colocarlas una al lado de la otra, use el "ancho"Propiedad y asignarle un valor.

Aquí, asignaremos el valor de la propiedad de ancho como "300px":

.div
flotador izquierdo;
Ancho: 300px;

Guarde el código dado y consulte los resultados:

Método 2: Coloque las imágenes una al lado de la otra en CSS usando la red

Para colocar dos o más de dos imágenes una al lado de la otra "redSe utiliza el diseño. Básicamente, la cuadrícula es un valor de la propiedad de visualización utilizada para crear un diseño que consiste en filas y columnas.

Sintaxis

La sintaxis de la propiedad de visualización con diseño de cuadrícula se proporciona de la siguiente manera:

Pantalla: cuadrícula;

Pasemos al ejemplo.

Ejemplo

Aquí, crearemos cuatro subdivs dentro de los nombres principales de divisas como "padre"Y agréguela usando la etiqueta.

Html

Coloque las imágenes una al lado de la otra con la cuadrícula CSS

A continuación, en la sección CSS, usaremos el ".padre"Para acceder al Div principal y establecer el valor de la propiedad de visualización como"red". Después de eso, estableceremos la fracción usando el "columnas de plantilla de cuadrícula"Propiedad para crear espacio para columnas. Especificando "1fr"Tres veces crearán"tresColumnas, lo que significa que todos los divs tienen el mismo espacio. Además, estableceremos la brecha entre las columnas utilizando la propiedad de GAP de columna y estableceremos su valor como "5px":

.padre
Pantalla: cuadrícula;
columnas de plantilla de cuadrícula: 1fr 1fr 1fr;
columna-gap: 5px;

Una vez que complete el código CSS, ejecute el archivo HTML y verifique la salida:

Método 3: Coloque dos imágenes una al lado de la otra en CSS usando Flex

El "doblar"Es el valor de la propiedad de visualización que permite colocar elementos uno al lado del otro. En tal escenario, los elementos se establecerán de acuerdo con la vista de la pantalla de la pantalla.

Sintaxis

La sintaxis de la propiedad de visualización con flex es:

Pantalla: Flex;

Pasemos al ejemplo:

Ejemplo

Consideraremos el archivo HTML anterior y agregaremos tres subdivs dentro del DIV principal y especificaremos diferentes fuentes de imágenes:

Coloque las imágenes una al lado de la otra con CSS Flex

En CSS, establezca el valor de la propiedad de visualización como "doblar"Y establecer la columna como"5px":

.padre
Pantalla: Flex;
Gap: 5px;

Esto dará el siguiente resultado:

Hemos proporcionado tres formas simples para colocar imágenes una al lado de la otra en HTML y CSS.

Conclusión

Las imágenes se colocan una al lado de la otra utilizando tres métodos diferentes de CSS, que son los "doblar" y "red"Valores de la propiedad de visualización y la"flotar" propiedad. CSS también le permite colocar el espacio o la brecha entre estas imágenes adyacentes. En esta guía, hemos discutido estos tres métodos en detalle y proporcionamos ejemplos de cada método para colocar imágenes una al lado de la otra utilizando CSS.