css - 创建相互连接的图像网格

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

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

像jQuery Masonry这样的马赛克插件就是为这类事情而设计的。不确定它是否可以让您控制哪张照片出现在哪一列中，但它可能工作得很好。

您可以使用CSS columns，但它对哪张照片应该出现在哪一列中提供有限的控制，并且它在 IE9 或更早版本中不起作用。

Answer 2

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

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