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;
}

1 行に 3 つの div が必要です。各行の最初と最後の div は、パディングやマージンなしでラッパー div の境界に配置する必要があります。各行の 2 番目の 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仕切りmargin-leftに 30px を指定してから、それぞれnth-child(3n+1)にmargin-left0 を指定するだけです。

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

JSFiddle の例。

于 2013-03-27T15:58:32.073 に答える