Estructura con CSSPuedes crear una cuadrícula de cajas que llene el navegador armoniosamente. Esto ha sido posible por mucho tiempo usando float, pero ahora con inline-block es aún más fácil. Veamos ejemplos con las dos opciones.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>¡Estoy flotando!
</div>Estoy usando clear para no flotar arriba de las cajas.
</div>Puedes lograr el mismo efecto usando display: inline-block;
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}¡Soy inline block!
</div>¡Soy inline block!
</div>¡Soy inline block!
</div>¡Soy inline block!
</div>¡Soy inline block!
</div>¡Soy inline block!
</div>¡Soy inline block!
</div>¡Soy inline block!
</div>¡Soy inline block!
</div>¡Soy inline block!
</div>En este caso no tengo que usar clear. ¡Bien!
Para soportar inline-block en IE6 y IE7 tendrás que trabajar extra. Algunas personas hablan de que inline-block desencadena algo llamado hasLayout, sin embargo, necesitarás saber eso solo si soportas viejos navegadores. Da click en el link anterior acerca de IE6 y IE7 si estás interesado en saber más. De lo contrario, continuemos con el siguiente tema.