CSS float：left导致不必要的空格，高度不同

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元素，并将text-align设置为左边：

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

此外，这允许您设置vertical-align: middle; 这样，如果需要，它们可以垂直居中。