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 */
}

Answer 2

我曾经想出过这个奇怪的事情

.justify-content { text-align : justify; position : relative; }

.justify-content>* { display : inline-block; }

.justify-content:after { content : ''; display : inline-block; width : 100%; height : 0; display : inline-block; }

只需将justify-content类添加到您的元素中，其内容就是合理的。但你必须删除浮子。

DEMO：http://jsfiddle.net/pavloschris/STS5F/11/

Answer 3

假设您希望列间隔，您可以简单地将.tile分频器设为margin-left 30px，然后为每个nth-child(3n+1)提供margin-left 0。

.tile{
    ...
    margin-left:30px;
}
.tile:nth-child(3n+1) {
    margin-left:0;
}

JSFiddle example

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

3 个答案: