我创建了一个网站,用户可以上传照片,并对照片进行评论。在我网站的主页上,按日期排序的照片大约有12张左右。
然而,我已经尝试了每种类型的显示样式选项来获得它,如果让我们说页面上的第一个图像非常高,那么第二行图像就不会全部被推下去。我理解第二行的第一个图像显然必须出现在第一行的第一个图像下面,但其他图像也不应该被推到下面。即使图片不高,如果在第一行的第一张图片上有评论,那么整个第二行将从第一行的第一张照片下面开始。
当我看网站Pinterest时,似乎他们已经解决了这个问题,并且没有因为一张照片结果太高而浪费不必要的空间。其他排的其他人似乎占用了所有的空间,这是我想要达到的。
目前我正在使用display:inner-table,但它并没有真正实现我想要的,虽然它比其他一些有时在结果中产生空白跳过空间的选项稍微好一些。实现这一目标的唯一方法是使用具有4列的表并在打印到页面之前预先填充这些列吗?
请原谅我的愚蠢。感谢您的帮助!为您的问题使用jQuery使您的生活更轻松。查看这些jQuery插件:
- 砌体 同位素
在这里阅读它们之间的区别:同位素和砌体jQuery插件的区别