CSS aligned rows without wrapper div

This is what I have:

and this is what I want:

I have a container div around all of the smaller divs, and the smaller divs are floated left. How can I get them to al开发者_高级运维ign in perfect rows like the bottom image? This would be easy but the catch is I don't want to use a container div for each row since I want the number of images per row to be fluid (container width is variable). Is this even possible without JS hacks?

You could just change the float:left to display:inline-block. That will lay the images out in rows, just like text layout, which sounds like what you want to do.

I post this with some apprehension because I don't know what you qualify as a Javascript hack... There is a plug-in that would work well for this, Masonry JS. But if you consider a plug-in a hack then I would suggest applying a display:inline-block; to the elements that you want in a line and removing the float:left; property.