均匀分布图像库

我有一个图像库，每个图像都有相同的宽度和高度，比如 10px。我希望它们间隔开，以便一行中有 5 个，并且它们在所有边上彼此间隔 5 像素。容器 div 具有 5px 内边距。有多个行！

我的问题是，如果我给每个图像留出 5px 的左边距，那么：

a) 容器 div 的大小适合，因此只有 4 个图像适合一行，因为五分之一的边距将其分流到下一行。

b) 容器 div 的大小增加了 5px，导致每行末尾有额外的间隙。

我应该如何设计我的图像，以便它们都适合正确的行并且没有任何难看的间隙不改变容器填充物?

您希望图像 div 上有右和下边距，容器 div 上有上、左内边距。

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/ http://jsfiddle.net/RP9Cg/

我刚刚再次重新阅读了你的问题，我看到了“不改变容器的填充”位。如果你绝对必须在容器的所有侧面都有 5 像素的填充（不确定为什么，也许你可以说），那么你将需要一些额外的样式来为每行最后的图像以及图库最后一行中的所有图像提供一些额外的样式。查看可能的解决方案：http://jsfiddle.net/T3HrJ/ http://jsfiddle.net/T3HrJ/