<分区>
根据这篇文章:http://css-tricks.com/how-nth-child-works/第 n 个子选择器的工作方式应该有所不同。
在我的例子中，我必须使用 .drag_box:nth-child(3n+2){} 来选择每三个 div，但通常它应该只是 .drag_box:nth-child (3n){}。怎么会？这是 fiddle :
这里是代码:
HTML:
<div id="content_box_search">
<label>
<input type="text" class="search" name="word"/>
<span class="search-icon"></span>
</label>
</div>
<div id="search_go">Go</div>
<div id="content_box_upload"> upload </div>
<div style="clear: both; height: 20px;"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
Javascript:
$(document).ready(function () {
$('#search_go').hide();
$('.search').bind('input', function () {
if ($(this).val()) {
$('#search_go').fadeIn(1000);
}
else {
$('#search_go').fadeOut(1000);
}
});
});
CSS:
.drag_box{
position: relative;
float: left;
width:30%;
height: 30px;
background-color:#ccc;
margin-right:5%;
margin-bottom:10px;
}
/* .drag_box:nth-child(3n+1){ */
.drag_box:nth-child(3n+2){
margin-right: 0; }
#content_box_search{
float: left; }
#search_go{
float: left;
font-size: 12px;
margin-left: 10px;
background-color: #dedede;
color: #646464;
cursor: pointer;
height: 25px;
line-height: 25px;
text-align: center;
width: 50px; }
#content_box_upload{
float: right;
width: 200px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #dedede;
color: #646464;
cursor: pointer;
}