En este artículo, aprenderemos a alinear 2 divs uno al lado del otro en HTML. La etiqueta <div> es un elemento a nivel de bloque, es decir, siempre comienza en una nueva línea y ocupa todo el ancho disponible para los lados izquierdo y derecho. También tiene un margen superior e inferior. La etiqueta <div> se usa para separar un bloque de contenido o para definir una sección en HTML. El uso principal de la etiqueta <div> es como contenedor de elementos HTML. Facilita el uso de CSS y JavaScript en estos elementos. Los atributos de clase e identificación se pueden usar con estas etiquetas.
El problema de alinear 2 divs horizontalmente: dado que la etiqueta <div> es un elemento de bloque, solo se puede colocar un div en una línea, y ocupa todo el espacio a la izquierda y a la derecha. Veamos el siguiente ejemplo para entenderlo mejor.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <a>Click here!</a> <a>This is a link</a> </body> </html>
Producción:
Aquí, se utilizan 2 etiquetas de anclaje. Dado que la etiqueta de anclaje es un elemento en línea, el segundo enlace aparece justo después del primero en la salida. Sin embargo, el segundo enlace se puede hacer para ir a la siguiente línea si usamos la etiqueta <div>. Esto se ilustra con el siguiente ejemplo:
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <a>Click here!</a> <div><a>This is a link</a></div> </body> </html>
Producción:
Es claramente visible que el uso de la etiqueta <div> tomó el segundo enlace en la otra línea porque adquiere todo el ancho de la línea. Si <div> fuera una etiqueta en línea, de forma predeterminada, dos divs se alinearían horizontalmente.
Maneras de alinear 2 divs horizontalmente: Tenemos dos divs que se pueden alinear horizontalmente con el uso de CSS. Hay varias formas de realizar esta tarea. Entenderemos todos los conceptos en una secuencia.
1. Usando una clase global para ambos divs: Podemos poner ambos divs en un div principal con un atributo de clase. El valor del atributo de clase se utilizará para diseñar los divs. En el ejemplo, ambas etiquetas div están encerradas dentro de otra etiqueta <div> que tiene la clase main . Luego se usa en la sección <head>, dentro de la etiqueta <style>. La propiedad float de CSS especifica la posición de un elemento.
Sintaxis:
float: left|right|initial|inherit|none;
Valores de atributo:
- none : Es el valor por defecto de una propiedad float. El elemento no debe flotar.
- heredar : la propiedad debe ser heredada de su elemento padre.
- left : Coloca un elemento a la derecha de su contenedor.
- right : Coloca un elemento a la izquierda de su contenedor.
- initial : la propiedad se establece en su valor predeterminado.
La propiedad clear de CSS especifica el flujo de un elemento al lado de un elemento flotante. El valor predeterminado de claro es ninguno.
Sintaxis:
clear: none;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.main div {
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="main">
<div>
<p>1.</p>
<p>2.</p>
<p>3.</p>
</div>
<div>
<p>GeeksforGeeks</p>
<p>Geeks Portal</p>
<p>Writing Portal</p>
</div>
</div>
</body>
</html>
Producción:
2. Uso de la propiedad flex: La propiedad flex en CSS es la combinación de las propiedades flex-grow, flex-shrink y flex-basis. Se utiliza para establecer la longitud de elementos flexibles. La propiedad flexible es mucho más receptiva y compatible con dispositivos móviles. Es fácil colocar elementos secundarios y el contenedor principal. El margen no colapsa con los márgenes del contenido. El orden de cualquier elemento se puede cambiar fácilmente sin editar la sección HTML. Podemos combinar con una clase div principal, la propiedad CSS flex se puede usar para alinear dos div uno al lado del otro.
La propiedad CSS flex se usa para establecer una longitud flexible para elementos flexibles.
Sintaxis:
flex: flex-grow flex-shrink flex-basis|initial|auto|inherit;
Valores de propiedad:
- flex-grow: un número que especifica cuántos elementos crecerán en relación con el resto de elementos flexibles.
- flex-shrink: un número que especifica cuántos elementos se reducirán en relación con el resto de elementos flexibles.
- flex-basis: Establece la longitud de los elementos. Los valores legales de base flexible son: auto, heredar o un número seguido de %, em, px o cualquier otra unidad de longitud.
Ejemplo: en este ejemplo, hemos utilizado una propiedad de visualización cuyo valor se establece en flex, que se utiliza para establecer la longitud de los elementos flexibles.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: flex;
}
</style>
</head>
<head>
<div class="main">
<div>
<p>1.</p>
<p>2.</p>
<p>3.</p>
</div>
<div>
<p>GeeksforGeeks</p>
<p>Geeks Portal</p>
<p>Writing Portal</p>
</div>
</div>
</head>
</html>
Producción:
3. Estilo individual de divs: las dos etiquetas <div> también se pueden diseñar individualmente usando la propiedad de estilo.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <div style="float: left; width: 50%"> <p>1.</p> <p>2.</p> <p>3.</p> </div> <div style="float: right; width: 50%"> <p>GeeksforGeeks</p> <p>Geeks Portal</p> <p>Writing Portal</p> </div> </body> </html>
Salida: la primera etiqueta <div> flota a la izquierda y la segunda etiqueta <div> flota a la derecha. Sin embargo, están alineados entre sí horizontalmente con mucho espacio. El ancho se puede cambiar para cambiar este espacio.
Publicación traducida automáticamente
Artículo escrito por shikha19b131014 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA