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幅图像的块布局订购这些图片？只有有效div，没有表！

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

Answer 1

如果图像大小相同，您只需为容器创建一个DIV并向左浮动所有图像并设置DIV的适当宽度。让我们说每个图像的宽度是100px，如下所示：

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

Answer 2

将样式float:left应用于每个图像并减小div宽度，直到每行包含4个图像。

Answer 3

除了infintys的答案，你应该做以下事情，因为你需要div来漂浮，而不是图像。

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

订购<img/> - 每行4幅图像的块布局中的标签

3 个答案: