如何对图像网格进行CSS操作

Question

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

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

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

为什么这个代码不起作用？解决这个问题的最好方法是什么？

CSS框架迫使我们指定最后几个元素：

960.一般事务人员使用：

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

BluePrint CSS使用：

.last {margin-right: 0;}

金格网使用：

.inside {margin-left: 0;}

但是，如果我只有一个未知的图片列表，我想把它放进n列，我该怎么做呢？在此之前，我已经编写了PHP代码，并且我用一个参数来调用它，以表示列的数量，但是必须有一些非常简单的CSS技巧来解决这个问题！

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

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中进行测试。

Answer 2

对于这个afaik，没有简单的CSS解决方案。您可以使用javascript来计算，也可以使用php。

编辑：有像nth-child()这样的选择器，但我不确定兼容性。您可以阅读更多关于它的和检查兼容性或只是谷歌获得更多信息;)实际上jQuery也在使用css选择器，所以您可以在上查看更多示例。

Edit2:呃，我忘了，nth-child()是没用的，因为你不认识n。所以回到我最初的答案：，如果你想要动态行为，你不能没有任何脚本。当然，你可以使用第n个选择器，但是只有在你知道的情况下，你才能在一行中有一些已知的图像。

Answer 3

.divclass {
    width:320px;
    float:left;
}
.maincol {
    width:100px;
    border-color:transparent;
    border-style:solid;
    border-width-right:10px;
    border-width-left:0px;
    border-width-top:0px;
    border-width-bottom:0px;
    margin:0px;
    padding:0px;
}
.rightcol {
    width:100px;
    border-color:transparent;
    border-style:solid;
    border-width:0px;
    margin:0px;
    padding:0px;
}
<div class="divclass"><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--></div>

你不想在图像之间出现空白字符！会把事情搞砸的..。我甚至不确定是否有评论。