CSS Dos divs uno al lado del otro
Métodos para colocar dos divs uno al lado del otro
Hay cinco métodos diferentes disponibles en CSS para colocar los dos divs uno al lado del otro:
- Pantalla: método de bloque en línea
- Pantalla: método de tabla
- Método CSS Float
- Método CSS Flexbox
- Método de cuadrícula CSS
Ejemplo #1: Uso de la pantalla: método de bloque en línea
Comenzamos nuestro código HTML abriendo un nuevo archivo en el código Visual Studio y luego seleccionando el idioma HTML. El archivo se crea aquí. Ponemos el "!"Mark para obtener las etiquetas básicas. Entonces, cuando presionemos "Enter", todas las etiquetas básicas de HTML aparecerán en el archivo.
Comenzamos nuestra codificación de la parte del cuerpo. Colocamos uno y dos divs diferentes aquí. Colocamos estos dos divs uno al lado del otro usando la propiedad "Pantalla: bloque en línea" en CSS. En este archivo HTML, también vinculamos el archivo CSS ante el cuerpo y dentro de la "Cabeza". Ahora, muévase al archivo CSS y mire cómo usamos esta propiedad para colocar estos dos divs uno al lado del otro.
Aquí, después de mencionar el nombre Div, abrimos los frenos rizados. Dentro de estos aparatos ortopédicos rizados, utilizamos la propiedad "Pantalla" de CSS. Debemos colocar el "bloque en línea" como el valor de esta propiedad de "pantalla". Esta propiedad de "pantalla: bloque en línea" nos ayuda a colocar dos divs, uno tras otro. Esta propiedad "Display: Inline-Block" no proporciona la "altura" y el "ancho", por lo que tenemos que mencionar las propiedades separadas para establecer la "altura" y el "ancho". Establecimos el ancho de ambos divs usando la propiedad de "ancho" y la establecemos en "150px". Establecimos la altura de ambos divs a "100px". El "fondo" de estos dos divs es "rosa". El "borde" que creamos aquí para ambos divs es "2px" en ancho, en color "púrpura" y de tipo "sólido". Mientras escribimos algún texto dentro de estos Divs, establecemos el texto en el "Centro" del DIV utilizando la propiedad "Align de texto". También establecemos el "tamaño de la fuente" en "24px" y la "familia de fuentes" a "argelina".
En la salida, ambos DIV se colocan uno al lado del otro porque utilizamos el método "Display: Inline-Block" en estos divs. Ambos divs se representan aquí uno tras otro.
Ejemplo #2: Uso del método de pantalla: tabla
En este ejemplo, tenemos un encabezado, y creamos dos divs con el nombre de "células de mesa" dentro de los divs principales que son los divs "Container" y "Table-Row". Usamos la propiedad de pantalla: tabla en CSS para representar ambos divs uno al lado del otro.
Comenzamos con el estilo del encabezado. El "estilo de fuentes" que usamos aquí para el encabezado es "cursiva". El "color" que utilizamos aquí para el encabezado es "granate". Y la "Fuente-Familia" que usamos es "Argelino". Entonces, tenemos la clase de "contenedor" de div. Usamos la propiedad "Pantalla: tabla" aquí, por lo que mostrará ambos divs uno al lado del otro. Establecimos el "ancho" en "40%". Luego, para la "hilera de la mesa", utilizamos la propiedad de "pantalla" nuevamente, pero aquí, colocamos la "hilera de la mesa" como su valor y su "altura" se establece en "130px".
Luego, nos movemos al div y establecemos algunas propiedades aquí para estos dos divs. Creamos un borde para ambos divs utilizando la propiedad "fronteriza". Este borde está establecido en "2px" por su ancho, "sólido" para su tipo y "granate" por su color. Después de esto, establecemos su "fondo" para que esos divs sean atractivos y usamos un color de "salmón ligero" para esta propiedad. También establecemos la "pantalla" aquí como la "célula de mesa". El "relleno" que usamos aquí es "2px". Además, tenemos algún texto en los Divs. Aplicamos algo de estilo al texto aquí. La "familia de fuentes" del texto es "argelina" y su "tamaño de fuente" es "25px". Alineamos estos textos con el "Centro".
A medida que aplicamos el método "Pantalla: tabla" en estos divs, aparecen uno al lado del otro en la salida. Ambos divs se representan uno al lado del otro.
Ejemplo #3: Uso del método de flotación
Aquí, después del encabezado, tenemos un Div principal llamado "Container" y colocamos los dos divs diferentes dentro de este div. Creamos un DIV con el nombre "ST-Box" y el otro DIV llamado "ND-Box". También colocamos los párrafos dentro de cada div, excepto el Div principal. Usaremos la propiedad CSS Float para establecer ambos divs uno al lado del otro.
Establecimos el "ancho" y "altura" del "contenedor" de Div colocando los valores "400px" y "190px", respectivamente. El "color de fondo" del contenedor es "verde". El "Top-Top" es "20px" y el "Padding-Left" y el "Padding-Right" están configurados en "15px" cada uno cada uno. Ahora, establecemos el Div "ST-Box" y usamos la propiedad "Flotación". Aquí lo establecemos en "Left".
El "ancho" y la "altura" son "180px" y "160px", respectivamente. El "color de fondo" de este Div "ST-Box" es "blanco" con un borde de color "negro" en tipo "sólido". El "tamaño de fuente" para el párrafo que hemos escrito en este div es "18px". Las propiedades de div "nd-box" son las mismas que el div "st-box" que ya explicamos aquí. La única propiedad nueva que agregamos aquí es la propiedad de "margen-izquierda" y la establecemos en "20px". También diseñamos un poco el encabezado cambiando su "color" a "verde". El "Times New Roman" se selecciona aquí como la "familia de fuentes".
Puedes ver en esta captura de pantalla que los dos divs aparecen aquí uno al lado del otro dentro del Div principal. Usamos la propiedad "flotante" en este ejemplo para colocar ambos divs uno tras otro.
Ejemplo #4: Uso del método FlexBox
Tenemos un Div principal llamado "Flex-Container" que contiene dos divs separados. Excepto por el Div principal, insertamos algunos párrafos dentro de cada div. Ambos divs se colocarán uno al lado del otro utilizando el método CSS FlexBox en este ejemplo.
Alineamos el encabezado en el "centro" y establecemos la "familia de fuentes" en "argelina". Mencionamos el "contenedor flexible" y colocamos la propiedad "Display: Flex" dentro de. Ponemos esta propiedad en el contenedor para que la propiedad "Flex" coloque el elemento infantil en un contexto flexible y alinee los Divs uno al lado del otro. Para el "Flex-Child", ponemos "Flex" y damos "1" como su valor. Creamos el borde alrededor de cada DIV utilizando la propiedad "Border" y estableciéndolo en tipo sólido "rojo". Establecimos el "tamaño de fuente" del párrafo que está escrito dentro de los Divs a "20px". El "margen-derecha" del "Flex-Child: First-Child" se establece aquí en "20px".
Estos divs aparecen uno al lado del otro en la salida porque utilizamos la propiedad "flexbox" en este ejemplo. Ambos divs se muestran uno al lado del otro.
Conclusión
Creamos esta guía para ayudarlo a comprender las propiedades de CSS, lo que ayuda a poner dos divs uno al lado del otro. Esta guía ha pasado por este tema en profundidad. Hemos pasado por los métodos que se utilizan para colocar dos divs uno al lado del otro en CSS. Explicamos que hay cinco propiedades para colocar dos divs uno al lado del otro. Revisamos cuatro casos diferentes en los que utilizamos las cuatro propiedades del CSS para configurar los dos divs uno al lado del otro y proporcionamos las salidas para poder ver cómo funcionan estas propiedades. Espero que puedan averiguar qué propiedades CSS se usan para colocar los Divs uno al lado del otro en CSS y cómo usarlas por su cuenta.