inline-block

Você pode criar um grid de caixas que preenchem a largura do navegador e quebram suavemente. Isso tem sido possível por muito tempo utilizando o float, mas agora com o valor inline-block da propriedade display é bem mais fácil. Vejamos exemplos de ambas as abordagens.

O modo difícil (com float)

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

<div class="box">

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou flutuando!

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

Estou utilizando a propriedade clear, logo não flutuo ao lado das outras caixas.

</div>

O modo fácil (com inline-block)

É possível obter o mesmo efeito utilizando o valor inline-block da propriedade display.

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

<div class="box2">

Eu sou um inline-block!

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

Eu sou um inline-block!

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

Eu sou um inline-block!

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

Eu sou um inline-block!

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

Eu sou um inline-block!

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

Eu sou um inline-block!

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

Eu sou um inline-block!

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

Eu sou um inline-block!

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

Eu sou um inline-block!

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

Eu sou um inline-block!

</div>
<div>

E eu não preciso utilizar clear neste caso. Show de bola!

</div>

Para utilizar o display:inline-block você precisará de um pouco mais de trabalho para dar suporte ao IE6 e IE7. Algumas vezes as pessoas falam sobre o inline-block ativando algo chamado hasLayout, mas você só precisa saber sobre isso para dar suporte a navegadores antigos. Veja o link anterior sobre o suporte ao IE6 e IE7 se estiver curioso para aprender mais. Se não, vamos continuar.

  • Creative Commons License