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; 這樣，如果需要，它們可以垂直居中。