Coloque HTML Div lado a lado

1. Usa la propiedad float
2. Usa la propiedad flexbox
3. Usar cuadrícula css

Esta publicación analizará muchos métodos para mostrar dos elementos div uno al lado del otro en un documento HTML.

Usa la propiedad float

Usando la propiedad CSS flotante, el texto y los elementos en línea pueden envolver un elemento colocado en el lado izquierdo o derecho de su contenedor. No obstante, el elemento se incluye en el flujo de la página, incluso si no forma parte del flujo regular.

Sintaxis:

float: $value;

Este valor puede ser cualquier cosa como “izquierda”, “derecha”, “ninguno”, “inicio en línea”, “fin en línea”, etc.

Para comprender mejor el concepto anterior, considere el siguiente ejemplo.

<div class="float-parent">
  <div class="float-child">Float Child 1</div>
  <div class="float-child">Float Child 2</div>
</div>

.float-parent {
    padding: 20px;
}

.float-child {
    width: 45%;
    float: left;
    padding: 20px;
    border: 1px dotted black;
}

En el ejemplo anterior, estamos haciendo flotar cada div para ponerlos uno al lado del otro usando el atributo float. Se mostrarán uno al lado del otro si hay espacio adecuado porque ambos están flotando hacia la izquierda.

Tenemos dos .float-child divs, cada uno con un ancho de 45%, por lo que encajan.

Ejecute la línea de código anterior en cualquier navegador compatible con HTML. Mostrará el siguiente resultado.

Usa la propiedad flexbox

Sin necesidad de “flotación” o “posicionamiento”, el módulo “Diseño de caja flexible” simplifica el desarrollo de estructuras de diseño flexibles y receptivas. Flexbox es compatible con dispositivos móviles y receptivo, lo que lo hace útil para diseñar diseños a pequeña escala.

Para comprender mejor el concepto anterior, considere el siguiente ejemplo.

<div class="flex-parent">
  <div class="flex-child">Flex Child 1</div>
  <div class="flex-child">Flex Child 2</div>
</div>

.flex-parent {
    display: flex;
    padding: 20px;
}

.flex-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

En el ejemplo anterior, configuramos display: flex; en el contenedor principal div usando el elemento de clase .flex-parent de flexbox. Esto activa flexbox.

Entonces estamos configurando flex: 1; en cada elemento .flex-child div. Esta cifra funciona como una relación entre los anchos de cada elemento flexible secundario en el elemento flexible principal.

Compartirán el espacio disponible por igual porque son idénticos. Tenemos dos componentes secundarios div; por lo tanto, cada div ocupará el 50% del espacio.

Ejecute la línea de código anterior en cualquier navegador compatible con HTML. Mostrará el siguiente resultado.

Usar cuadrícula css

El diseño CSS Grid sobresale al dividir una página en regiones principales y especificar la conexión entre los componentes de un control HTML basado en primitivas.

Un cambio importante con grid es que primero elige cómo se verá la plantilla de cuadrícula. Refiriéndose al número de columnas y/o filas que desea en su diseño.

Para comprender mejor el concepto anterior, considere el siguiente ejemplo.

<div class="grid-parent">
    <div class="grid-child">
        Grid Child 1
    </div>
    <div class="grid-child">
        Grid Child 2
    </div>
</div>

.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

En este caso, queremos dos columnas con anchos iguales. Entonces, usamos la display: grid; propiedad para habilitar grid en el elemento principal div a través del elemento de clase .grid-container.

El parámetro grid-template-columns se usa luego para agregar el número de columnas que deseamos en nuestro diseño.

Lo establecemos en 1fr 1fr porque queremos dos columnas del mismo ancho. Esto le indica al navegador que genere un diseño de dos columnas con un espacio de 1 fr = unidad fraccionaria entre cada columna.

La regla flex: 1 que usamos en el enfoque flexbox es análoga a la unidad fr, que es una relación de una columna a otra. Cada columna utilizará la misma cantidad de espacio si las columnas se establecen en 1fr 1fr.

Ejecute la línea de código anterior en cualquier navegador compatible con HTML. Mostrará el siguiente resultado.

Manifestación