Question

好的，我知道1）这可能不仅仅用CSS而且2）它真的不可能。
不幸的是，由于用户的一些要求，我需要找到一种方法使其成为可能。

好的，所以一些大大简化的标记：

<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>

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

这里的主要障碍是包装内的div是可移动的。不仅如此，还可以添加或删除更多内部div，并将其放置在任何位置。

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

有人有什么想法吗？

基于Torgamus建议的解决方案

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

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

Answer 1

实际上，只要您使用类似于“假绝对定位”技术的技术，就可以使用CSS：

http://www.alistapart.com/articles/fauxabsolutepositioning/

在你的情况下，你可以这样做：

<html>
    <head>
    </head>
    <body>
        <div><!--There's content in here --></div>
        <div class="wrapper">
            <div class="container">
              <div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff1</div>
            </div>
            <div class="container">
              <div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff2</div>
            </div>
            <div class="container">
              <div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff3</div>
            </div>
            <div class="container">
              <div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff4</div>
            </div>
        </div>
        <div><!--There's content in here --></div>
    </body>
</html>

以精确的方式使用margin-top和margin-left，在实际绝对定位中使用top和left。

使用以下CSS：

.wrapper {
    overflow: hidden; /* To clear contents */
    zoom: 1; /* To fix IE6 bugs with floats */
}

.container {
    float: left;
    margin-left: -100%;
    position: relative;
    left: 100%;
    width: 100%;
}

.stuff {
    float: left;
}

当然，这需要在物品周围添加额外的容器。但是你得到的东西的行为与绝对定位的物品完全相同，但是可以清除。

Answer 2

最简单的解决方案可能是使用jQuery来获取从页面顶部到#wrapper div和高度的距离，然后将内容<div>置于此下方。类似的东西：

$("#div").css('top', ($("#wrapper").offset().top + $("#wrapper").height()) + "px")

Answer 3

为什么你不能绝对定位容器然后让它的孩子相对？

Answer 4

根据您的评论

以某种方式找到该div中的最低点并设置div高度以匹配。我正在努力这样做，但我不知道从哪里开始。

并且您愿意使用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>

Answer 5

你不应该'清除'一个绝对定位的元素。 div是如何定位的？也许您应该将内容div相对于绝对div放置，以便它自然地在它之后流动。

也许将内容div粘贴在包装器中，使其相对，然后将其放在其他div之后，它应该“清除”。试试吧！

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

5 个答案: