Fixed-width elements that wrap

I have a bunch of thumbnails that I wish to display in my page. The widths of the thumbnails are not necessarily all the same, and neither are the heights. What I'd like to do is arrange them in a tabular format such that elements line up in neat rows and columns with each "cell" being an equal, specified width.

I do not want to use a table as I would like the number of rows/columns to automatically re-size with a browser re-size.

I've tried sticking the images in:

1. divs of fixed-width with float left. The problem is because of unequal heights, wrapped divs might "cat开发者_JAVA百科ch" on the bottom of a div on the row above.

2. spans and lis: setting width: 200px or whatever doesn't seem to fix the width; however they do wrap fine.

If you use display: inline-block on your spans or lis, that should allow you to set the width.

http://jsfiddle.net/bnmPR/

You could use lis and make them display:inline-block;

http://jsfiddle.net/jasongennaro/zDC2w/

Drag the window over to see it work.

borders, width, and height added to show effect

you can still use you divs that float left and add this script: http://masonry.desandro.com/

It will push the divs up vertically so that they are beside each other.