En este artículo, discutiremos cada uno de los enfoques mencionados uno por uno y brindaremos un ejemplo adecuado de cada método.
¡Entonces empecemos!
Método 1: coloque dos divisiones una al lado de la otra en CSS usando la cuadrícula
El CSS” cuadrícula El diseño 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 que se utiliza para crear un diseño que consta de filas y columnas.
Sintaxis
La sintaxis de la propiedad de visualización con diseño de cuadrícula se proporciona a continuación:
pantalla: rejilla
Ahora, veamos un ejemplo relacionado con la colocación de dos divs uno al lado del otro en CSS usando el diseño de cuadrícula.
Ejemplo
Aquí, crearemos dos divisiones secundarias dentro de la división principal, con los nombres de clase como ' padre ”, “ niño ' y ' niño ”:
< división clase = 'padre' >< división clase = 'niño' >< / división >
< división clase = 'niño' >< / división >
< / división >
A continuación, en la sección CSS, utilice ' .padre ” para acceder al div principal y establecer el valor de la propiedad de visualización como “ cuadrícula ”. A continuación, establezca la fracción usando el ' cuadrícula-plantilla-columnas ” propiedad para crear espacio para las columnas. En nuestro caso, estableceremos las fracciones como “ 1fr ' y ' 1fr ”, lo que significa que ambos divs han adquirido el mismo espacio. Además, estableceremos el espacio entre dos columnas usando la propiedad column-gap y estableceremos su valor como ' 25px ”.
CSS:
.padre {monitor : cuadrícula ;
cuadrícula-plantilla-columnas : 1 fr 1 fr ;
espacio entre columnas : 25px ;
}
En el siguiente paso, usamos “ .niño ” para acceder a ambos div secundarios y establecer la altura de los divs como “ 250px ” y establezca el color de fondo como “ RGB (253, 5, 109) ”:
.niño {altura : 250px ;
antecedentes : RGB ( 253 , 5 , 109 ) ;
}
Esto mostrará el siguiente resultado:
Pasemos a otro método para colocar div uno al lado del otro
Método 2: coloque dos divisiones una al lado de la otra en CSS usando flex
Los ' flexionar ” 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. Encoge o hace crecer el artículo flexible para que quepa en su contenedor.
Sintaxis
La sintaxis de la propiedad de visualización con flex se proporciona a continuación:
pantalla: flexible;Pasemos al ejemplo para entender el concepto planteado.
Ejemplo
Consideraremos el mismo archivo HTML y aplicaremos “ flexionar ” al contenedor principal. Aquí, estableceremos el valor de la propiedad de visualización como flex y estableceremos la brecha entre los divs secundarios como ' 10px ”:
.padre {monitor : flexionar ;
brecha : 10 píxeles ;
}
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 muestra a continuación:
Método 3: coloque dos divisiones una al lado de la otra en CSS usando float
La propiedad float de 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 float es:
flotante: ninguno|izquierda|derechaAquí está la descripción de los valores dados anteriormente:
- ninguna: Se utiliza para restringir la flotación.
- izquierda: Se utiliza para hacer flotar elementos en el lado izquierdo.
- Correcto: Se utiliza para hacer flotar elementos en el lado derecho.
Pasemos al ejemplo de colocar div uno al lado del otro.
Ejemplo
Ahora, crearemos dos divs dentro de la etiqueta
y asignaremos el nombre de la clase como ' div1 ' y ' div2 ”: < cuerpo >< división clase = 'div1' >< / división >
< división clase = 'div2' >< / división >
< / cuerpo >
Luego, 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 los mismos.
A continuación, asignamos el valor de la propiedad float como “ izquierda ” y establezca el ancho y la altura del div como “ 50% ' y ' 40% ”. También usamos la propiedad box-sizing y establecemos su valor como ' cuadro de borde ”. Además, establezca el color de fondo del div como ' RGB (7, 255, 222) ” y establezca los valores de la propiedad de borde como “ 3 píxeles ”, “ sólido ', y ' rgb(255, 0, 255) ”:
.div1 , .div2 {flotar : izquierda ;
ancho : 50% ;
altura : 40% ;
tamaño de caja : cuadro de borde ;
antecedentes : RGB ( 7 , 255 , 222 ) ;
borde : 3 píxeles sólido RGB ( 255 , 0 , 255 ) ;
}
Nota: Puede colocar dos divs uno al lado del otro sin usar la propiedad de tamaño de cuadro y la propiedad de borde configurando los diferentes colores de fondo de los divs.
Una vez que implemente el código anterior, ejecute el archivo HTML y vea el resultado:
Nota: Para crear un espacio entre dos divs, primero cree otro div y luego establezca el margen del div en consecuencia.
Conclusión
Los divs se pueden colocar uno al lado del otro usando tres métodos diferentes de CSS, que son los ' flexionar ' y ' cuadrícula ” valores de la propiedad de visualización y el “ 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 proporcionamos ejemplos relacionados.