2

所以我必须在包装器 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 内容中不能有行。我需要让所有的 div 一个接一个地排列。

div 的位置应如下所示：

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

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

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

4

3 回答 3

8

使用 :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 */
}
于 2013-03-27T15:58:36.243 回答
1

我曾经想出这个奇怪的东西

.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类添加到您的元素中，它的内容就会被证明是合理的。但是您必须删除浮动。

演示：http: //jsfiddle.net/pavloschris/STS5F/11/

于 2013-03-27T16:01:27.363 回答
0

假设你想让你的列间隔开，你可以简单地给你的.tile分隔线 a margin-left30px，然后给每个nth-child(3n+1)a margin-left0。

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

JSFiddle 示例。

于 2013-03-27T15:58:32.073 回答