Question

好吧所以我一直试图让div系统作为一个网格工作，并且也可以使用它来获得优势。我需要网格中的最后一个div没有边距。正如你在我的jsfiddle中看到的那样：http://jsfiddle.net/kyFBr/，最后一个div在右边有一个边距。

我不能简单地为最后一个显示“Picture 4”的div使用另一个类，因为最终这个数据将被拉出数据库，我需要格式化，当div改变位置而另一个出现在其中时的地方。

对于网格方块，我只能使用“grid1”类。

包含所有网格方块的div使用此作为css：

div.events {
    width: 970px;
    margin-left: auto;
    margin-right: auto; 
    text-align: left;   
}

网格的css是：

div.grid1 {
width: 219.5px;
    margin-right: 3px;
    float: left;
    padding:10px;
    background-image: url('debut_dark.png'); /*Image From SubtlePatterns.com*/
    margin-bottom: 3px;
}

有人有解决方案吗？感谢。

Answer 1

这么简单

http://jsfiddle.net/kyFBr/8/

一个.row需要有960px， - 6px表示边距= 954表示.wrapper 比起一些简单的数学：

.row{
    width: 960px;
    margin:0 auto;
    text-align: left;     
}

.wrapper{
    color: white;
    width: 954px;
    height: auto;
    margin: 0 3px 3px 3px;
    background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/debut_dark.png'); /*Image From SubtlePatterns.com*/
}

.wrapper p{ padding:15px; } /* DON'T USE PADDING ON THE GRID!! but here! inner elements! */

div.grid1 {
    width: 234px; /* MATH + */
    margin: 3px;  /* MATH = 960 */
    float: left;
    background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/debut_dark.png'); /*Image From SubtlePatterns.com*/
}

div.grid1 p {  
    text-align: center;
    padding:15px;
}

如果你想继续数学而不是：

.grid1, .grid2{
    position:relative;
    display:inline;
    margin:3px;
    float:left;
    background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/debut_dark.png'); /*Image From SubtlePatterns.com*/
}

.grid1 {width: 234px;}
.grid2 {width: 474px;}

<强> Fiddle Example

Answer 2

您遇到的问题是CSS无法计算直到更新的CSS级别3属性。你需要的是：nth-child，特别是:nth-child(4n)（n表示每隔4个而不仅仅是第4个）

div.grid1:nth-child(4n) {
    margin-right:0px;
}

演示：http://jsfiddle.net/tvx7m/2/show
资料来源：http://jsfiddle.net/tvx7m/2

此解决方案当然仅适用于支持CSS级别3的现代浏览器。

真正的功劳归于@Frederik（做出答案，我会删除我的）

Answer 3

将.wrapper的宽度更改为：width: 917px; 而.grid1的{{1}}来：

margin-right

此处：http://jsfiddle.net/yentup/kyFBr/5/show/

完美排列！

Answer 4

除了网格类（一个元素可以有多个类）之外，还可以创建类似.last或.omega的类，将margin-right重置为0.或者使用CSS3 {{ 1}}伪选择器。

对于last-child，您可能希望将行分组为...行。否则你可以使用nth-child影响每个第三个元素

或尝试使用这个漂亮的网格生成器http://grids.heroku.com/

创建CSS

使用div作为网格？

4 个答案: