Ordering <img>-tags in a block layout of 4 images per row

I have 20 <img>-tags:

<img src="/image/1.jpg"/>
<img src="/image/2.jpg"/>
<img src="/image/3.jpg"/>
<img src="/image/....jpg"/>
<img src="/image/N.jpg"/>

How can I order these pictures in a block layout of 4 images per row? Only valid div, no table!

Example: 开发者_如何学Chttp://new.music.yahoo.com/videos/charts/

If the images are all the same size you just create one DIV for container and float all images left and set appropriate width of the DIV. Lets say each image is 100px width you create as follows:

<div class="container">
    <div class="image-block">
        <img src="img1.jpg">
        <span>Here goes some text</span>
    </div>
    ....
</div>

CSS

div.container {
    width: 400px;
}

div.container .image-block {
    float: left;
    width: 100px;
    /* you may use overflow: hiiden; 
    if the text or image is wider 
    than the box width */
}

div.container .image-block span {
    /* styling the text */
}

Apply the style float:left to every image and reduce the div width until it contains 4 images per row.

Additionally to infintys answer, you should do the following, because you need the div to float, not the image.

div.container {
    width: 25%;
    float: left;
}