inline-block

Podes criar uma grelha de caixas que se enche o a largura do browser e envolve agradàvelmente. Isto é possivel desde á bastante tempo utilizando float, mas agora com inline-block é ainda mais fácil. Vamos olhar para exemplos de ambas as maneiras.

A maneira dura (utilizando float)

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

<div class="box">

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a flutuar!

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

Estou a utilizar clear para não flutuar para perto das caixas acima.

</div>

A maneira fácil (utilizando inline-block)

Tu consegues alcançar o mesmo efeito utilizando o valor inline-block da propriedade display.

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

<div class="box2">

Sou um bloco inline!

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

Sou um bloco inline!

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

Sou um bloco inline!

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

Sou um bloco inline!

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

Sou um bloco inline!

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

Sou um bloco inline!

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

Sou um bloco inline!

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

Sou um bloco inline!

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

Sou um bloco inline!

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

Sou um bloco inline!

</div>
<div>

Neste caso não preciso utiliza o clear. Nice!

</div>

Tu tens que fazer trabalho extra para o IE6 e IE7 suportarem o inline-block. Algumas vezes as pessoas falam sobre o inline-block disparar qualquer coisa chamada hasLayout, apesar de precisares saber sobre isto para suportar browsers antigos. Segue o link anterior sobre o suporte de IE6 e IE7 se estiveres curioso para aprender mais. Caso contrário, vamos continuar.

  • Creative Commons License