limit number of images in a row?

i have a set of images that i want to show where they are s开发者_运维技巧aved into my database as linked, where each images has its thumbs, now i have used limit inquery to show a small number of images where the user needs to go next to show the other, my question is that how can i arrange those images where 4 images in a row and 3 columns

HTML:

<div id="image_container">
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 ...
</div>

CSS:

#image_container { width:440px; overflow:hidden; }
#image_container img { width:100px; margin:5px; float:left; display:inline; }

You may need to adjust the sizes; this is the general concept though.

If the images all have the same width then make the container only wide enough for 4 images and float the images left

Otherwise loop through the images and use the modulus operator to test for which image in the row you are on. If you are on an image that should be the first in the row you can clear the floats on that image.