纯CSS图像拼接

Question

我正试图在一个类似网格的系统中平铺图像，在这些图像之间没有间隔。如果不能控制DOM中图像的顺序，那么没有javascript可以吗？

显然，您不能仅仅浮动容器，因为如果您的图像大小不同，就会有空白。

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

您可以使用列计数CSS3属性来生成网格，并使图像与下面的教程中的图像相匹配。http://css-tricks.com/seamless-responsive-photo-grid/