css - 在每行 4 个图像的 block 布局中排序 <img> 标签

Question

我有 20 <img> -标签:

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

如何在每行 4 张图片的 block 布局中对这些图片进行排序？ 仅有效 div , 没有 table !

示例:http://new.music.yahoo.com/videos/charts/

Answer 1

如果图像大小相同，您只需为容器创建一个 DIV 并将所有图像向左浮动并设置适当的 DIV 宽度。假设您创建的每张图片宽度为 100 像素，如下所示:

<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 */
}