0
今、私は#content divが自分のポジションの高さに対応するように苦労しています:絶対記事。私は複数の方法を試みましたが、すべて失敗しました。私は高さを計算するためにJSが必要であることを知っています。私もフィドルを作りました。あなたが見ることができるように、#content divは記事に反応しません。コンテンツボックスは、子の石積みコンテンツの高さに応答しません。 fiddle incl
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";
}
}
}
私はあなたのいずれかが私を助けることができると思います:)
#content divにはどのような反応が期待できますか?私は理解していない、すべてが私には大丈夫です。私は3 x 3グリッドを見る。私は内容を入れて正しく滞在します。 –
私の#content divの高さは、高さ0を示しています。 –