You are on page 1of 2

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

“Grid” de cajas de igual ancho


Con la propiedad float, es fácil flotar cajas de lado a lado de contenedor:

Caja 1 Caja 2

Caja 1 Caja 2 Caja 3

* {
box-sizing: border-box;
}

.box {
float: left;
width: 33.33%; /* 3 cajas, ( se usa 25% para cuatro, y 50% para 2, etc) */
padding: 50px; /* esto si tu quieres espacio entre las cajas */
}

Ver: Código 130.html

¿Qué es el tamaño de una caja?


Usted puede crear fácilmente tres cajas flotantes de lado a lado. Sin embargo, cuando se agrega
algo que aumenta el ancho de cada caja (por ejemplo, relleno o bordes), la caja se romperá. La
propiedad box-sizing nos permite incluir el relleno y el borde del ancho y alto total de la,
asegurándose de que el relleno permanece en el interior de la caja y que no se rompa.
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Imágenes de lado a lado


El “grid” de cajas también puede ser usado para mostrar imágenes de lado a lado:
.img-container {
float: left;
width: 33.33%; /* 3 contenedores (use 25% para 4, y 50% para 2) */
padding: 5px; /* esto si tu quieres espacio entre las cajas */
}

Ver: Código 131.html

Cajas de igual altura


En el ejemplo anterior, ud. aprendió a flotar cajas de la misma anchura de lado a lado. Sin
embargo, no es fácil para crear las cajas flotantes con alturas iguales. Una solución rápida es
establecer una altura fija, como en el ejemplo siguiente:

Caja 1 Caja 2
Algún contenido Algún contenido
Algún contenido
Algún contenido
Algún contenido

.box {
height: 500px;
}

Ver: Código 132.html

Este ejemplo no es muy flexible del todo. Estaría muy bien si Ud. puede garantizar un alto
constante para los contenidos de las cajas, pero este no es siempre el caso. Si cambias la
resolución por ejemplo a un equipo móvil, el contenido de la segunda caja se mostrará fuera de la
misma. Aquí es donde la propiedad CSS3 Flexbox viene muy bien, gracias a ella se puede estirar de
forma automática el alto de cajas.

.flex-container-box {
display: flex;
flex-wrap: nowrap;
background-color: #21A1F0;
}
Ver: Código 133.html

You might also like