如何为图像网格做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;}

Golden Grid使用:

.inside {margin-left: 0;}

但是,当我拥有的是一个未知的图像列表时,我怎么能这样做呢？我想把它放在n列中？之前,我已经为此编写了PHP代码,并且我用一个列数来调用它,但是对于这个问题必须有一些非常简单的CSS技巧!

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

Answer 1

绝对有一个简单的css/html解决方案.你不应该需要硬编码风格,PHP或做数学或使用JavaScript:

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

这可能不是最佳或唯一的解决方案,但有时添加包装div可以提供很大的灵活性.这是我使用的代码的重要部分:

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中测试过.