我试图在类似网格的系统中平铺图像,其中任何一个都没有间距.如果你无法控制DOM中图像的顺序,是否可以不使用javascript?
你显然不能只是浮动容器,因为如果你的图像大小不一样会有间隙.
@H_403_10@.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就不可能.希望我错了. =)
最佳答案
您可以使用列计数CSS3属性来制作网格,并使图像适合,如下面的教程中所示. http://css-tricks.com/seamless-responsive-photo-grid/
原文链接:https://www.f2er.com/css/427135.html