CSS: Ignoring divs height when floating

Я пытаюсь отобразить несколько картинок. Все они имеют одинаковую ширину, но разную высоту. Я пытаюсь сделать что-то вроде:

Имя класса каждой картинки - pic

<img class = "pic" src = .... />

В таблице стилей я указал атрибут float:left:

.pic{
    float:left
}

Конечный результат не тот, который ожидался, каждый ряд выравнивается по вертикали после самого верхнего div из предыдущего ряда:

Есть ли способ решить мою проблему в чистом кроссбраузерном css?