均匀地放置图片库

您希望在图像分隔符上有右下边距,在容器分隔符上有左上边距。

CSS:

.container {
    padding: 5px 0 0 5px;
    background-color: green;
    width: 75px;
    position: relative;
    overflow: hidden;
}

.image {
    margin-right: 5px;
    margin-bottom: 5px;
    float:left;
    width:10px;
    height:10px;
    background-color: red;
}

HTML:

<div class="container">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
</div>​

实际检查: http://jsfiddle.net/RP9Cg/

我刚刚重新阅读了你的问题,我看到了“没有改变容器的填充物”的一点。如果容器的所有侧面都必须有5px的填充(不确定原因,也许可以这样说),则需要为每行最后一个图像和库最后一行的所有图像添加一些额外的样式。查看可能的解决方案: http://jsfiddle.net/T3HrJ/

我自己对HTML&css还是相当陌生,尽管当我想这样做时,我包括

        text-align:center;

在该分区的CSS文件中,这似乎有效。值得一试!

在用于生成图像标记的任何代码循环中,都可以使用modulo运算符为每个图像分配一个列索引的CSS类。然后在样式中,您可以执行一些操作,例如关闭第一个“列”中每个图像的左边距。

循环输出的伪代码:

for ( $i=0; $i<gallerySize; $i++ ) {
    echo '<img class="galleryimage gridcolumn' . ($i%5) . '" src="blahblah.gif">';
}

然后,您可以使用这样的CSS规则更改每行中的第一项:

img.galleryimage { margin: 5px; }
img.gridcolumn0 { margin-left: 0px; }