Question

我正在尝试制作一个能够很好地相互连接的图像网格。

这是我的网格： http://www.yannickluijten.be/test2

并非每张图片都有相同的高度，所以这就是问题所在：我希望第四张图像（灰色）出现在第一张图像（绿色）下方，我不想使用3列。我怎么能这样做？

.img1 {
    width: 300px;
    height: 200px;
    float: left;
    background: green;
}

.img2 {
    width: 300px;
    height: 400px;
    float: left;
    background: blue;
}

.img3 {
    width: 300px;
    height: 300px;
    float: left;
    background: yellow;
}

.img4 {
    width: 300px;
    height: 400px;
    float: left;
    background: gray;
}

Answer 1

.img4 {
width: 300px;
height: 400px;
float: left;
background: gray;
clear: both;
}

第四张图片位于第一行，但不完全位于第一张图片下方。

Answer 2

使用CSS浮动，无法控制何时可变高度浮动元素应“环绕”到左边缘，而不会在其中一些之间出现不需要的垂直间距。

像jQuery Masonry这样的马赛克插件适用于此类事情。不确定它是否允许您控制哪张照片出现在哪一列中，但它可以正常工作。

您可以使用CSS columns，但它可以控制哪些照片应该出现在哪一列中，而且在IE9或更早版本中无法使用。

创建彼此连接的图像网格

2 个答案: