javascript - 使用纯 CSS 进行图像平铺

Question

我正在尝试在网格状系统中平铺图像，其中任何图像之间都没有间距。如果您无法控制 DOM 中图像的顺序，是否可以不用 javascript？

显然，您不能只 float 容器，因为如果您的图片大小不一，就会出现间隙。

http://jsfiddle.net/bzCNb/3/

.wrapper
{
    width:400px;
}

/* One grid unit */
.box1
{
    float:left;
    overflow:hidden;
    height:100px;
    width:100px;
}

/* 2x bigger than a box1, takes up 4 grid units */
.box4
{
    float:left;
    overflow:hidden;
    height:200px;
    width:200px;
}

由于 DOM 中元素的顺序，前三行的行为​​是正确的。

我猜如果没有 javascript 是不可能的。希望我错了。 =)

Answer 1

您可以使用 column-count CSS3 属性制作网格并让图像适合，就像下面的教程一样。 http://css-tricks.com/seamless-responsive-photo-grid/