Question

现在我正努力让我的#content div回应我的位置：绝对文章。我尝试了多种方法，但都失败了。我知道我需要一些JS来计算高度。我也做了一个小提琴，你可以看到#content div对这些文章没有反应。

HTML

<div id="wrapper">         
    <div id="content">
        <article></article>
    </div>
</div>

CSS

#wrapper{
   background-color: #f5f5f5;
   height: auto;
   position: relative;
}                                                       

#content{
   max-width: 960px;
   margin: 0 auto;
   height: auto;
   position: relative;
}

article{
   background: #fff;
   position: absolute;
   width: 32%;
}

JS

window.addEventListener("load", renderGrid, false); 
window.addEventListener("resize", renderGrid, false);

function renderGrid(){

var blocks = document.getElementById("content").children;
var pad = 20, cols = 3, newleft, newtop;
for(var i = 1; i < blocks.length; i++){
    if(i % cols == 0){
        newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
        blocks[i].style.top = newtop+"px";
    }else{
        if(blocks[i-cols]){ 
            newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
            blocks[i].style.top = newtop+"px";
        }
        newleft = (blocks[i-1].offsetLeft + blocks [i-1].offsetWidth) + pad;
        blocks[i].style.left = newleft+"px";
    }
}
}

我希望你们中的一个可以帮助我:)。

Answer 1

是的，因为高度内容div为0 :)如果你得到文件高度？

$(document).height();

内容框无法响应儿童砌体内容高度。小提琴

1 个答案: