Question

我想创建一个图像网格，我已经遇到了我认为必须是网格最常见的问题：即如何删除最后一个元素的边距/填充？< / strong>我在尝试（没有成功）：

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

Answer 2

这个afaik没有简单的CSS解决方案。你要么必须使用javascript来做一些数学运算，要么就像你说的那样使用php。

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

Edit2：呃，我实在忘记了，nth-child()无论如何都没用，因为你不知道n。回到我原来的答案：如果你想要动态行为，你不能没有任何脚本。你当然可以使用那个nth选择器，但只有在你知道的情况下，你才会在一行中有一些已知数量的图像。

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>

你想要的图像之间没有白色字符！那些会搞砸了......我甚至不确定评论。

如何为图像网格做CSS

3 个答案: