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

Making floating images to have the same margin

本文关键字：图像      更新时间：2023-09-26

有没有简单的解决方案可以使浮动图像与它们上面的图像具有相同的边距？

我有一个包含 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>

代替 float: left ，您可以使用：

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

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

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

相关文章：