Se você já montou uma galeria de imagens para algum website, provavelmente tenha usado a propriedade float CSS. Porém, quando trabalhamos com float, há um problema fundamental: quando há imagens ou elementos de tamanhos diferentes, é possível que alguns dos itens não quebrem a linha corretamente.

Download dos Arquivos de Exemplo

Vamos usar a galeria de fotos abaixo como exemplo:

<ul>
    <li>
        <a href="#"><img src="imagem1.jpg" alt="Imagem 1"></a>
        <p>Legenda teste</p>
    </li>
    <li>
        <a href="#"><img src="imagem2.jpg" alt="Imagem 2"></a>
        <p>Legenda mais comprida que quebra a linha</p>
    </li>
    <li>
        <a href="#"><img src="imagem3.jpg" alt="Imagem 3"></a>
        <p>Outra Imagem</p>
    </li>
    <li>
        <a href="#"><img src="imagem4.jpg" alt="Imagem 4"></a>
        <p>Legenda teste</p>
    </li>
    <li>
        <a href="#"><img src="imagem5.jpg" alt="Imagem 5"></a>
        <p>Legenda teste</p>
    </li>
    <li>
        <a href="#"><img src="imagem6.jpg" alt="Imagem 6"></a>
        <p>Legenda teste</p>
    </li>
</ul>

Usando float, teríamos um código semelhante a este:

body {
    background: #CCC;
}

.galeria {
    background: #FFF;
    max-width: 50em;
    padding: 1.5em;
    margin: 2em auto;
    list-style: none;
}

.galeria li {
    float: left;
    width: 23%;
    margin: 1%;
    background: #EEE;
}

.galeria a {
    display: block;
}

.galeria img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.galeria .legenda {
    background: #333;
    color: #FFF;
    padding: 0.2em;
    text-align: center;
}

/* classes que finaliza a flutuação */

.grupo:before,
.grupo:after {
    content: " ";
    display: table;
}

.grupo:after {
    clear: both;
}

Visualizar Exemplo

Veja como a galeria "quebra". Isso acontece porque float funciona ocupando o primeiro espaço disponível depois do maior item da linha anterior. Em uma galeria de fotos com itens de tamanhos desiguais, os espaços que ficam disponíveis nas linhas seguintes da galeria são irregulares, o que causa problemas de posicionamento.

Uma das maneiras de se corrigir isso seria colocar um elemento com a propriedade clear depois de cada linha da galeria (finalizando a flutuação após cada linha). Isso, porém, exige manutenção extra e não oferece nenhuma praticidade (principalmente se estamos trabalhando com uma galeria gerada automaticamente por programação).

Uma alternativa neste tipo de caso é utilizar a propriedade display: inline-block. O valor inline-block tem todas as vantagens de um elemento bloco, como renderização correta de margens e bordas, mas com algumas vantagens de um elemento em linha. Com isso, dispensa-se o uso da propriedade float e ainda conseguimos trabalhar com alinhamento vertical (propriedade vertical-align CSS).

Com poucas mudanças, é possível conseguir uma galeria mais funcional e com poucas desvantagens:

.galeria li {
    display: inline-block;
    vertical-align: bottom;
    width: 22%;
    margin: 1%;
    background: #EEE;
}

/* restante do código permanece o mesmo */

Veja o Resultado Final

A principal desvantagem é que os elementos ocupam um pouco mais de espaço que o designado, por se comportarem também como elementos em linha. Assim como elementos em linha (inline), um espaço acaba sendo adicionado após cada item da galeria (pois espaços em branco no código fonte contam neste caso, como os espaços entre palavras em um texto). Desde que isso seja levado em conta quando for feito o cálculo para espaçamento dos itens, não haverá maiores problemas.

Para este tipo de situação e muitas outras, há também as novas possibilidades trazidas pela linguagem CSS3 (módulo de layout) que aos poucos estão ganhando espaço.