inline-block

Puedes 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.

El método difícil (usando float)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="box">

¡Estoy flotando!

</div>
<div class="after-box">

Estoy usando clear para no flotar arriba de las cajas.

</div>

El método fácil (usando inline-block)

Puedes lograr el mismo efecto usando display: inline-block;

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div class="box2">

¡Soy inline block!

</div>
<div>

En este caso no tengo que usar clear. ¡Bien!

</div>

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.

  • Creative Commons License
  • Ads by Bocoup