Html CSS浮动：左边导致不必要的空白，高度不同

这是一个实时网站的问题，我所说的页面是

基本上，我有一些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 {
    display:inline-block;
    margin-right:120px;
    padding-bottom:10px;
        padding-top:10px;
    text-align:left;
    width: 100px;
}

此外，这允许您设置

垂直对齐：中间以便它们可以垂直居中（如果需要）

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