Question

我有两排浮动的DIV。我使用PocketGrid作为CSS框架（特别是它的＆＃34; automatic rows＆＃34;功能），我想使用CSS索引而不是特定的类名来调整每个。

我在this jsFiddle尝试了它，但即使前三个（第一行）的大小正确，接下来的三个也不是。

.sintesi-offerta > .block:nth-child(1n) {
  width: 40%;
}

.sintesi-offerta > .block:nth-child(2n) {
  width: 20%;
}

.sintesi-offerta > .block:nth-child(3n) {
  width: 40%;
}

如何设置.block:nth-child(...)以便：

第1和第4块，宽度为40％
第二和第五块20％（依此类推）

Answer 1

如果我理解正确，您需要做的就是将CSS更改为以下内容：

.sintesi-offerta > .block:nth-child(3n+1) {
  width: 40%;
}
.sintesi-offerta > .block:nth-child(3n+2) {
  width: 20%;
}
.sintesi-offerta > .block:nth-child(3n+3) {
  width: 40%;
}

旁注：你的br标签应为<br/>，以便jsfiddle正确解释它们。

Answer 2

基本上你想要......

.sintesi-offerta > .block:nth-of-type(3n+1),
.sintesi-offerta > .block:nth-of-type(3n){
    width: 40%;
}

第三个块（包括第一个块）之后的每个.block的每个第3个.block和3n的

... 3n+1和...

.sintesi-offerta > .block:nth-of-type(3n+2){
    width: 20%;
}

... 3n+2用于中间.block（每行第3个.block之后的第二个.block，包括第一行中的第二个.block）。

只要您想要/有3＆＃34;列＆＃34;

，无论您添加多少行，此模式都适用于每一行。

Demo here

Answer 3

问题在于CSS不会允许您需要的复杂标识符。

您正在尝试格式化以下子项：

1, 3, 4, 6, 7, 9, 10, 12

我能想到的唯一方法是添加间距div以确保偶数个div / line，然后为奇数和偶数子项分配不同的样式。

http://jsfiddle.net/pfg40qd1/2/

编辑：或者，如果你知道总会有三个/行......

<div class="row">Blocks</div>

...并根据行div格式化块。

Answer 4

您可以使用nth-of-type(4n+1)，nth-of-type(4n+2)，nth-of-type(4n+3)和nth-of-type(4n+4)等语法，

我建议使用nth-of-type代替nth-child，因为它的套房更适合您的情况

.sintesi-offerta > .block:nth-of-type(4n+1) {}
.sintesi-offerta > .block:nth-of-type(4n+2) {}
.sintesi-offerta > .block:nth-of-type(4n+3) {}
.sintesi-offerta > .block:nth-of-type(4n + 4) {}

check fiddle

如何根据CSS索引设置DIV的宽度

4 个答案: