Question

我想在包装中显示一些div。 div具有相同的类名并具有固定的宽度。我想为行中的第一个div设置一些margin-right，但不设置行中的最后一个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>

Answer 1

现在习惯了这个

第一个选项

.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

Answer 2

div:not(:last-child) { margin-right: 10px; }

Answer 3

您可以使用css3 last-child属性。写得像这样：

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

但它不是IE8＆amp;以下

根据您的要求，您可以使用+选择器。写得像这样：

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

＆安培;这是IE7之前的工作

Answer 4

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

每行第一个div之后的CSS边距？

4 个答案: