CSS float: оставил ненужные пробелы с переменной высотой

Question

Это проблема с живым сайтом, страница, о которой я говорю, это это .

В основном у меня есть PHP, который выводит изображения из моей БД, завернутые в div, например, для каждого изображения:

<div class='gall_div'>
<a href='img_gallery/CD cover Bach 2.jpg' class='lightbox'>
<img class='galleryImage' title='(tooltip)' src='someimg.jpg'>
</a></div>

Я хочу, чтобы мои изображения были перенесены влево, CSS выглядит так:

div.gall_div {
    float:left;
    margin-right:120px;
    padding-bottom:10px;
        padding-top:10px;
    width: 100px;
}

Обратите внимание: если вы попытаетесь изменить размер страницы, слева от второго / третьего ряда изображений появится ненужный пробел. Я считаю, что это связано с изменением высоты изображения. Как я могу это исправить?

Answer 1

Я бы сказал, что лучшим решением было бы немного изменить ваш CSS, объявить их как inline-block элементы и установить выравнивание текста по левому краю:

div.gall_div {
    display:inline-block;
    margin-right:120px;
    padding-bottom:10px;
        padding-top:10px;
    text-align:left;
    width: 100px;
}

Дополнительно, это позволяет вам установить vertical-align: middle; так, чтобы они могли быть центрированы вертикально, если это необходимо.