8

私は、兄弟がどの兄弟であるかに基づいて、いくつかの兄弟divの位置を調整しようとしています。現在、それらはすべてですがposition: absolute、それは石に設定されていません。

それらはそれぞれ数百ピクセルの高さですが、後ろのものが前のものの上に数ピクセルだけ「覗く」ように、それらを互いに重ねてほしいと思います。これを行うために私が考えることができる最も簡単な方法はnth-of-type、一致する1つのインデックスにのみルールを適用するのではなく、そのためのミックスインを減らすことです。代わりに、インデックスをミックスインに渡します。基本的に、私はこれが欲しいです：

&: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'あるいは、レイアウトでdivに特定の高さ（完全な高さではない）を与えるようなもののCSSフィールドはありますか？

4

2 に答える 2

10

事前に要素の数を知っている（または何らかの方法でcssをオンザフライで再計算している）と仮定すると、スタックオーバーフローで最初に発見したループ構造に入れると、基本的には機能します。

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;
}
于 2012-11-25T20:50:53.213 に答える
0

これが可能である方法がわかりません。かなりかっこいいと思いますが、それが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/

于 2012-11-25T21:10:49.213 に答える