1

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

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

这是一个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>
4

1 回答 1

3

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

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

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

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

于 2013-10-25T18:44:15.050 回答