Floated thumbnail gallery, different sizes, how to handle?

When simply doing float:left to all thumbnails of the same size, a gallery looks great. But when diffe开发者_JAVA百科rent size thumbnails come in to play, that is no longer the case.

What is the best way to handle different size thumbnails? Do I need to use tables instead?

---

None of the possible CSS solutions look particularly good.

I recommend using JavaScript+jQuery instead, specifically one of these plugins:

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

---

I think the best solution is to give each thumbnail a div container with a fixed size, so that every thumbnail takes the same space. I mean, don't resize your thumbnails. The picture in the div should be centered.

---

I have used following plugin, it's working fine :

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

---

For those in 2017 looking for a gallery for different sized images, check this css-tricks article: https://css-tricks.com/seamless-responsive-photo-grid/