jquery – 如何“清除”绝对定位的元素

好吧,我知道1)这可能不仅仅用CSS而且2)它真的不可能.
不幸的是,由于用户的一些要求,我需要找到一种方法使其成为可能. @H_403_3@好的,所以一些大大简化的标记：

<html>
<head>
</head>
<body>
<div><!--There's content in here --></div>
<div id="wrapper">
<div style="position: absolute;">Stuff1</div>
<div style="position: absolute;">Stuff2</div>
<div style="position: absolute;">Stuff3</div>
<div style="position: absolute;">Stuff4</div>
</div>
<div><!--There's content in here --></div>
</body>
</html>

@H_403_3@我需要清除#wrapper中的div.假设他们都有顶部和左侧位置.

@H_403_3@这里的主要障碍是包装内的div是可移动的.不仅如此,还可以在任何地方添加或删除更多内部div.

@H_403_3@我认为这可能是jQuery的可能……以某种方式找到该div中的最低点并设置div高度以匹配.我正在努力这样做,但不知道从哪里开始.

@H_403_3@有人有主意吗？

@H_403_3@解决方案基于Torgamus建议的javascript

var maxHeight = 0;
$('#wrapper div').each(function () {
    var tmpHeight = $(this).height() + $(this).position().top;

    if (tmpHeight > maxHeight) {
        maxHeight = tmpHeight;
        $('#wrapper').height(maxHeight);
    }
});

解决方法

根据你的评论

@H_403_3@Somehow finding the lowest point within that div and setting the div height to match. I’m working on doing it this way,but am not sure where to start.

@H_403_3@并且你愿意使用jQuery,我使用JavaScript掀起了一些东西：

<html>  
<head>  
<title>Clearing abs positions</title>  
<script>  
function setHeight() {
    var height1 = document.getElementById("abs1").style.top;
    height1 = parseInt(height1.substring(0,height1.indexOf("px")));
    height1 += document.getElementById("abs1").offsetHeight;

    var height2 = document.getElementById("abs2").style.top;
    height2 = parseInt(height2.substring(0,height2.indexOf("px")));
    height2 += document.getElementById("abs2").offsetHeight;

    var height3 = document.getElementById("abs3").style.top;
    height3 = parseInt(height3.substring(0,height3.indexOf("px")));
    height3 += document.getElementById("abs3").offsetHeight;

    var height4 = document.getElementById("abs4").style.top;
    height4 = parseInt(height4.substring(0,height4.indexOf("px")));
    height4 += document.getElementById("abs4").offsetHeight;

    var maxVal = Math.max(height1,height2);
    maxVal = Math.max(maxVal,height3);
    maxVal = Math.max(maxVal,height4);

    var wrapper = document.getElementById("wrapper");
    wrapper.style.height = maxVal + "px";
}
</script>
</head>
<body onload="setHeight()">
    <div>
        foo
        <!--There's content in here -->
    </div>
    <div id="wrapper" style="border: 1px solid black;">
        <div id="abs1" style="position: absolute; left: 100px; top: 150px; border: 1px solid red;">
            Stuff1
        </div>
        <div id="abs2" style="position: absolute; left: 200px; top: 250px; border: 1px solid green;">
            Stuff2
        </div>
        <div id="abs3" style="position: absolute; left: 300px; top: 100px; border: 1px solid blue;">
            Stuff3
        </div>
        <div id="abs4" style="position: absolute; left: 400px; top: 450px; border: 1px solid orange;">
            Stuff4
        </div>
    </div>
    <div>
        bar
        <!--There's content in here -->
    </div>
</body>
</html>

jquery – 如何“清除”绝对定位的元素

解决方法

猜你在找的jQuery相关文章