将6+个div与每行3个div对齐

Question

所以我必须在包装div中对齐一些div.这是代码:

<div id="tiles-wrapper">
    <div class="tile">asdfasdf</div>
    <div class="tile">asdfas</div>
    <div class="tile">asdf</div>
    <div class="tile">asdfasdf</div>
    <div class="tile">asdfas</div>
    <div class="tile">asdf</div>
</div>

这是我的CSS代码:

/* TILES */
#tiles-wrapper{
    position: relative;
    margin-top: 20px;
    width: 960px;
    overflow: hidden;
}
.tile{
    width: 300px;
    height: 200px;
    margin-bottom: 20px;
    float: left;
    overflow: hidden;
    background-color: aqua;
}

我需要在一行中有3个div.每行中的第一个和最后一个div必须放在包装器div的边界处,没有任何填充或边距.每行中的第二个div应该以左侧和右侧的一些边距为中心.

问题是我的html内容中不能有行.我需要把所有的divs排在一起.

div应该像这样定位:

|[1]------[2]-------[3]|
|[4]------[5]-------[6]|
|[7]------[8]-------[9]|
...

有没有一个很好的CSS或JS方法来做到这一点？

这是小提琴:http://jsfiddle.net/STS5F/5

Answer 1

使用:nth-​​child(n)选择器

.tile:nth-child(3n+1) {
    /* position of the first column */
}

.tile:nth-child(3n+2) {
    /* position of the second column */
}

.tile:nth-child(3n+0) {
    /* position of the third column */
}