图像平铺与纯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

您可以使用column-count CSS3 属性来制作网格并使图像适合，如以下教程所示。http://css-tricks.com/seamless-responsive-photo-grid/