3 formas fáciles de colocar dos divs uno al lado del otro en CSS

Los DIV se utilizan principalmente para crear diferentes secciones en HTML, que se pueden diseñar en consecuencia con la ayuda del CSS. A veces es posible que necesite colocar dos divs uno al lado del otro para crear un diseño elegante. Para este propósito, CSS proporciona varios métodos como:

• Mediante el uso "red"
• Mediante el uso "doblar"
• Mediante el uso "flotar"

En este artículo, discutiremos cada uno de los enfoques mencionados uno por uno y proporcionaremos un ejemplo adecuado de cada método.

Entonces empecemos!

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

El CSS "red"El diseño le permite al usuario colocar dos o más dos divs uno al lado del otro. 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 da a continuación:

Pantalla: cuadrícula

Ahora, vamos a ver un ejemplo relacionado con colocar dos divs uno al lado del otro en CSS usando el diseño de la cuadrícula.

Ejemplo

Aquí, crearemos dos Divs infantiles dentro del Div Padre, teniendo los nombres de la clase como "padre","niño" y "niño":

A continuación, en la sección CSS, use ".padre"Para acceder al Div principal y establecer el valor de la propiedad de visualización como"red". A continuación, configure la fracción usando el "columnas de plantilla de cuadrícula"Propiedad para crear espacio para columnas. En nuestro caso, estableceremos fracciones como "1fr" y "1fr", Lo que significa que ambos divs han adquirido un espacio igual. Además, estableceremos la brecha entre dos columnas utilizando la propiedad de GAP de columna y estableceremos su valor como "25px".

CSS:

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

En el siguiente paso, usamos ".niño"Para acceder a los niños Div y establecer la altura de los Divs como"250px"Y establece el color de fondo como"RGB (253, 5, 109)":

.niño
Altura: 250px;
Antecedentes: RGB (253, 5, 109);

Esto mostrará el siguiente resultado:

Movernos a otro método para colocar Div uno al lado del otro

Método 2: Coloque dos divs uno al lado del otro en CSS usando Flex

El "doblar"Es el valor de la propiedad de visualización que permite colocar dos divs uno al lado del otro. Esta propiedad se utiliza para establecer una longitud flexible para el artículo flexible. Se encoge o crece el elemento flexible para caber en su contenedor.

Sintaxis

La sintaxis de la propiedad de visualización con flex se da a continuación:

Pantalla: Flex;

Pasemos al ejemplo para comprender el concepto declarado.

Ejemplo

Consideraremos el mismo archivo HTML y aplicaremos "doblar"Para el contenedor principal. Aquí, estableceremos el valor de la propiedad de visualización como flex y estableceremos la brecha entre los Divs de los niños como "10px":

.padre
Pantalla: Flex;
Gap: 10px;

Después de eso, establezca el ancho, la altura y el color de fondo del Div como "650px","200px", y "RGB (0, 255, 42)", Respectivamente:

.niño
Ancho: 650px;
Altura: 200px;
Antecedentes: RGB (0, 255, 42);

El resultado del código dado se proporciona a continuación:

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

La propiedad flotante CSS especifica la dirección flotante de un elemento. Más específicamente, esta propiedad se puede utilizar para colocar dos divs uno al lado del otro en CSS.

Sintaxis

La sintaxis de la propiedad flotante es:

flotante: ninguno | izquierda | derecha

Aquí está la descripción de los valores anteriores:

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

Pasemos al ejemplo de colocar Div lado a lado.

Ejemplo

Ahora, crearemos dos divs dentro de la etiqueta y asignaremos el nombre de la clase como "div1" y "div2":

Entonces, usa ".div1" y ".div2"Para acceder a los contenedores agregados en la sección HTML. Usaremos ambos divs en la misma clase porque las propiedades y valores que vamos a asignar a ambos son las mismas.

A continuación, asignamos el valor de la propiedad flotante como "izquierda"Y establece el ancho y la altura del Div como"50%" y "40%". También usamos la propiedad de tamaño de caja y establecemos su valor como "caja de fronteras". Además, establezca el color de fondo del div as a "RGB (7, 255, 222)"Y establezca los valores de la propiedad fronteriza como"3px","sólido", y "RGB (255, 0, 255)":

.div1, .Div2
flotador izquierdo;
Ancho: 50%;
Altura: 40%;
dimensionamiento de la caja: border-box;
Antecedentes: RGB (7, 255, 222);
borde: 3px sólido RGB (255, 0, 255);

Nota: Puede colocar dos divs uno al lado del otro sin usar propiedades de tamaño de caja y propiedad de borde estableciendo los diferentes colores de fondo de los Divs.

Una vez que implementa el código anterior, ejecute el archivo HTML y vea el resultado:

Nota: Para crear una brecha entre dos divs, primero cree otro div y luego establezca el margen del div en consecuencia.

Conclusión

Los DIV se pueden colocar uno al lado del otro utilizando tres métodos diferentes de CSS, que son los "doblar" y "red"Valores de la propiedad de visualización y la"flotar" propiedad. Cada uno de los métodos funciona de manera eficiente; Sin embargo, puede utilizar cualquiera de ellos de acuerdo con nuestros requisitos. En esta guía, hemos discutido tres métodos para colocar Div uno al lado del otro usando CSS y proporcionados ejemplos relacionados.