Professional Documents
Culture Documents
Caja 1 Caja 2
* {
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 */
}
Caja 1 Caja 2
Algún contenido Algún contenido
Algún contenido
Algún contenido
Algún contenido
.box {
height: 500px;
}
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