El inline-block Valor
Ha sido posible durante un largo tiempo para crear una cuadrícula de cajas que llena el ancho del navegador y envuelve bien (cuando se cambia el tamaño del navegador), utilizando el float propiedad.
Sin embargo, el inline-block valor de la display de inmuebles hace que este sea aún más fácil.
inline-block elementos son como elementos en línea, pero pueden tener una anchura y una altura.
Ejemplos
La vieja manera - con ayuda de float (nota que también tenemos que especificar una clear propiedad para el elemento después de las cajas flotantes):
Ejemplo
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
} Inténtalo tú mismo " El mismo efecto se puede lograr mediante el uso de la inline-block valor de la display la propiedad (observe que no hay clear es necesaria la propiedad):
Ejemplo
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
} Inténtalo tú mismo "