好吧,我知道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建议的javascript
var maxHeight = 0;
$('#wrapper div').each(function () {
var tmpHeight = $(this).height() + $(this).position().top;
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('#wrapper').height(maxHeight);
}
});
Phi*_*ier 13
实际上,如果您使用类似于"人造绝对定位"技术的技术,可以使用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;
}
当然,这需要在物品周围添加额外的容器.但是你得到的东西的行为与绝对定位的物品完全一样,但是可以清除.
根据您的评论
以某种方式找到该 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>