我正在尝试在网格状系统中平铺图像,其中任何图像之间都没有间距。如果您无法控制 DOM 中图像的顺序,是否可以不用 javascript?
显然,您不能只 float 容器,因为如果您的图片大小不一,就会出现间隙。
.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 是不可能的。希望我错了。 =)
最佳答案
您可以使用 column-count CSS3 属性制作网格并让图像适合,就像下面的教程一样。 http://css-tricks.com/seamless-responsive-photo-grid/
关于javascript - 使用纯 CSS 进行图像平铺,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14653981/