Question

我有一个图像库，每个图像都有相同的宽度和高度，比如10px。我希望它们间隔开，以便连续有5个，它们各自相距5px。容器div有5px填充。有多行！

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

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

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

我应该如何设置我的图像样式以使它们都适合正确的行并且没有任何难看的间隙而不更改容器填充？

Answer 1

您希望图像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/

我再次重新阅读你的问题，我看到“没有更改容器的填充”位。如果你绝对必须在容器的所有侧面都有5px填充（不知道为什么，也许你可以说），你需要一些额外的样式，用于每行最后的图像和图库最后一行的所有图像。查看可能的解决方案：http://jsfiddle.net/T3HrJ/

Answer 2

我对html＆amp; css我自己，虽然我想这样做，但我还是

        text-align:center;

在该div的css文件中，这似乎有效。值得一试！

Answer 3

在用于生成图像标记的任何代码循环中，您可以使用模运算符为每个图像分配列索引的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; }

均匀地隔开了一个图像库

3 个答案: