Question

我正在尝试调整几个兄弟div的位置，这取决于他们是哪个兄弟姐妹。目前，他们都是position: absolute，但这并不是一成不变的。

它们每个都有几百个像素高，但我希望它们相互重叠，以便后面的那些只能“偷看”在前面几个像素之上。我能想到的最简单的方法是nth-of-type的Less mixin，而不是仅将规则应用于匹配的一个索引，而是将索引传递给mixin。基本上，我想要这个：

&:nth-of-type(@n) {
    top: @n * 20px;
}

编辑：我目前正在做的事情：

&:nth-of-type(1) {
    .card_offset(1);
}
&:nth-of-type(2) {
    .card_offset(2);
}
&:nth-of-type(3) {
    .card_offset(3);
}
&:nth-of-type(4) {
    .card_offset(4);
}

显然这不是最理想的。在Less中有更好的方法吗？

或者，是否有类似'layout-height'之类的CSS字段会在布局中给div一定的高度（而不是它的全高）？

Answer 1

假设你事先知道元素的数量（或者以某种方式重新计算你的css），那么基本上你的工作是put into a loop structure我最初发现的here on stack overflow。

LESS代码

.loop(@index) when (@index > 0) {
     //set top amount
    &:nth-of-type(@{index}) { //NOTE: 1.3.3 and under is just @index, not @{index}
        top: @index * 20px;
    }

     // next iteration
     .loop(@index - 1);
}

// end the loop when index is 0
.loop(0) {}

.yourElem {
    @n: 6; //num of elements (could skip this and just put number in)
    .loop(@n);
}

<强>输出

.yourElem:nth-of-type(6) {
  top: 120px;
}
.yourElem:nth-of-type(5) {
  top: 100px;
}
.yourElem:nth-of-type(4) {
  top: 80px;
}
.yourElem:nth-of-type(3) {
  top: 60px;
}
.yourElem:nth-of-type(2) {
  top: 40px;
}
.yourElem:nth-of-type(1) {
  top: 20px;
}

Answer 2

我认为没有办法实现这一点。会很酷，但我猜这就是javascript的用途。

$('.parentDiv').children('div').each(function() {
    $(this).css({"top": num * 20 + "px"});
    num = num + 1;
});

这是完整的js解决方案： http://jsfiddle.net/VbuQ9/

如果你愿意，你可以在这里玩LESS小提琴。 http://jsfiddle.net/hV8sX/1/

更少mixin或选择器根据兄弟指数改变位置？

2 个答案: