php - 如何为图像网格做 CSS

Question

我想创建一个图像网格，我遇到了我认为是网格最常见的问题:即如何删除最后一个元素的边距/填充？ 我正在尝试(但没有成功):

#page {
margin: 0 -8px -8px 0;
}

#page a {
float: left;
margin: 0 8px 8px 0;
}

为什么这段代码不起作用？解决它的最佳方法是什么？

CSS 框架强制我们指定最后的元素:

960.gs 使用:

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

BluePrint CSS 使用:

.last {margin-right: 0;}

金色网格使用:

.inside {margin-left: 0;}

但是当我只有一个我想放入 n 列的未知图像列表时，我该怎么做呢？之前，我为此编写了 PHP 代码，并使用列数参数调用它，但必须有一些非常简单的 CSS 技巧来解决这个问题!

(删除了实时页面链接，因为下面的 jsfiddle 示例要好得多)

Answer 1

绝对有一个简单的 css/html 解决方案。您不应该需要使用 php 或进行数学运算或使用 javascript 对样式进行硬编码:

http://jsfiddle.net/Madmartigan/34UCn/5/

这可能不是最好的或唯一的解决方案，但有时添加包装器 div 会给您带来很大的灵 active 。这是我使用的代码的重要部分:

HTML:

<div class="wrapper">
    <div>
        <img><img><img><img><img><img>
    </div>
</div>

CSS:

.wrapper {
    overflow:hidden;
    width:320px;
}
.wrapper div {
    /* any width up to (total img width) * (num_columns) */
    /* the rest will be chopped off by overflow:hidden */
    width:330px;

    /* chops off top "padding" of inner div (first row imgs top margin) */
    margin-top:-10px;
}
img {
    width:100px;
    height:75px;
    float:left;
    margin:10px 10px 0 0;
}

希望这是您正在寻找的效果。这不适用于可变大小的图像，但在您的示例中，它们看起来都是相同的大小。在 IE6、IE8 和 FF4 中测试。