使浮动图像具有相同的边距

Question

是否有任何简单的解决方案可使浮动图像与其上方的图像具有相同的边距？

我有一个容器有40多张图片。所有图像宽度相同但高度不同。当页面加载时它们看起来很好，但是调整浏览器的大小会使图像粘到较大高度的图像上，因此一行最终可能只有一个图像而且很多是空的。我想要的是图像在它们之间具有相同的垂直空间。

这是一个jsfiddle：http://jsfiddle.net/Yuwrp/

我能想到的唯一方法是让容器相对放置并且图像位于绝对位置，并使用Javascript根据容器的宽度计算出多少列图像，存储数组中的高度总和并使用它放置下一个图像。 我可能会做到这一点，但寻找一个更简单的解决方案。

感谢。

<style type="text/css">
    #container{overflow: hidden;}
    #container > img{
        float: left;
        width: 200px;
        /* height varies for images */
    }
</style>
<div id="container">
    <img src="" />
    <!-- more images -->
    <img src="" />
</div>

Answer 1

而不是float: left，您可以使用：

display: inline-block;
vertical-align: top;

http://jsfiddle.net/Yuwrp/1/

或者将vertical-align更改为middle或bottom，具体取决于您希望它们如何对齐。