jquery - 使用 div 作为网格？

Question

好的，所以我一直在尝试让 div 系统作为网格工作，同时也让边距与它一起工作。我需要网格中的最后一个 div 没有边距。正如您在我的 jsfiddle 中看到的那样:http://jsfiddle.net/kyFBr/ , 最后一个 div 在右边有一个边距。

我不能简单地为最后一个显示“图片四”的 div 使用不同的类，因为最终这些数据将从数据库中提取出来，我需要在该 div 改变位置并且另一个出现在它的位置时进行格式化地方。

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

包含所有网格方 block 的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 = .wrapper 954比一些简单的数学:

.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