0

我有一系列内部包含动态内容的 div（内容的长度由 CMS 确定）：

<div class="contentbox">
~content~
</div>
<div class="contentbox">
~content~
</div>
<div class="contentbox">
~content~
</div>

我希望每个 div 的顶部都位于顶部的下方，从而创建“3D 纸叠”效果。

通常我会使用 z-indexes 和 position absolute 并将 margin-top 设置为父 div 的高度，例如：

#contentbox1 {
height: 300px;
z-index:99;
position: absolute;
}
#contentbox2 {
margin-top: 290px;
height: 300px;
z-index:98;
position: absolute;
}

但是，如果我有动态内容并且不知道上面 div 的高度是多少，这将不起作用。

有谁知道解决这个问题的方法，所以我可以“3D堆叠” div，但将它们放在页面下方？

编辑：这是我的问题的一个小提琴：http: //jsfiddle.net/XHJS8/2/（请注意您如何看不到其他 2 个 div，因为它们被较大的第一个 div 隐藏）

4

1 回答 1

1

好的，我真正能做到的唯一方法是：http JQuery: //jsfiddle.net/XHJS8/8/

在这里，我得到了height以前的div并调整了电流divs margin-top accordingly：

var num = $('.contentbox').length;

var i = 0;

var z = 99;

var totalmarg = 0;

while(i <= num){

    if (i > 1){
        y = i - 1;

       var margheight = $(".contentbox:nth-child(" + y + ")").height();

        margheight = margheight + 20;

        totalmarg = totalmarg + margheight;

        $(".contentbox:nth-child(" + i + ")").css("margin-top", totalmarg );
    }

$(".contentbox:nth-child(" + i + ")").css("z-index", z );    

z = z - 1;

i++;

};
于 2013-07-17T04:22:17.633 回答