1

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

我不能简单地为最后一个显示“图片四”的 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;
}

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

4

4 回答 4

4

很简单

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;}

小提琴示例

于 2012-12-17T04:23:31.483 回答
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（做出回答，我会删除我的）

于 2012-12-17T04:18:44.667 回答
0

.wrapper将' 宽度更改为：width: 917px; 并将.grid1'更改margin-right为：

margin-right: 1px;
margin-left: 2px;

这里：http: //jsfiddle.net/yentup/kyFBr/5/show/

它完美地排列！

于 2012-12-17T03:55:36.857 回答
0

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

对于最后一个孩子，您可能希望将行分组为...行。否则你可以使用 nth-child 来影响每三个元素

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

于 2012-12-17T04:09:36.687 回答