javascript - 使 float 图像具有相同的边距

Question

是否有任何简单的解决方案可以使 float 图像与它们之上的图像具有相同的边距？

我有一个包含 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，具体取决于您希望它们如何对齐。