3

我想在包装中显示一些 div。div 具有相同的类名并具有固定的宽度。我想为行中的第一个 div 设置一些边距,但不是为行中的最后一个 div,但问题是我无法更改 html。如果用 CSS 不可能,可以用 jQuery 来完成吗? 编辑:对不起,忘了提,总是有 2 个 div 连续。

<div class="list">

<div class="box">Box 1</div> 
<div class="box">Box 2</div> <!-- should be margin-right:0 --> 
<div class="box">Box 3</div> 
<div class="box">Box 4</div> <!-- should be margin-right:0 --> 

</div>
4

4 回答 4

7

现在习惯了

第一个选项

.box:nth-of-type(2n){
margin-right:0;
}

第二种选择

.box:nth-child(even){
margin-right:0;
}

更多信息http://www.w3.org/Style/Examples/007/evenodd.en.html

于 2012-06-25T12:01:23.817 回答
2

您可以为此使用 css3last-child属性。像这样写:

.box:last-child{
 margin-right:0;
}

但这不是 IE8 及以下

根据您的要求,您可以为此使用 + 选择器。像这样写:

.box + .box{
 margin-left:10px;
}

&它的工作到 IE7

于 2012-06-25T12:02:13.537 回答
2
div:not(:last-child) { margin-right: 10px; }
于 2012-06-25T12:02:26.110 回答
0

听起来你需要这个http://csswizardry.com/2011/08/building-better-grid-systems/

于 2012-06-25T12:52:24.957 回答