浮动缩略图库，不同大小，如何处理？

Question

当所有大小相同的缩略图都使用float:left时，画廊看起来很棒。但是当不同大小的缩略图出现时，情况就不再如此。

处理不同大小的缩略图的最佳方法是什么？我需要使用表格吗？

- user429620

Answer 1

所有可能的CSS解决方案都不是特别好。

我建议使用JavaScript+jQuery，具体来说是其中的一个插件：

• http://masonry.desandro.com/
• http://isotope.metafizzy.co/

- thirtydot

---

这些插件真的很棒。 - Dónal

Answer 2

我认为最好的解决方案是给每个缩略图一个固定大小的div容器，这样每个缩略图占据相同的空间。我的意思是，不要调整缩略图的大小。 在div中的图片应该居中显示。

- dknaack

Answer 3

我使用了以下插件，它运行良好：

http://suprb.com/apps/gridalicious/

- Rohit Jindal

---

请注意，仅链接答案是不被鼓励的，SO答案应该是寻找解决方案的终点（而不是另一个参考站点，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的摘要，将链接作为参考。 - kleopatra

Answer 4

对于那些在2017年寻找不同尺寸图库的人，可以查看这篇css-tricks文章：https://css-tricks.com/seamless-responsive-photo-grid/

- Allan Oliveira