好吧,我知道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);
}
});
我有以下标记:
<html>
<body style="margin:0;padding:0">
<div>
<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div>
<div style="border:3px solid blue; width:25%; position: absolute; left:72.5%">Right</div>
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>
</div>
</body>
</html>
我想在这里实现的是三个div如下:
+---------------------------+--------+
|Left |Right |
+---------------------------+--------+
|Bottom |
+------------------------------------+
但是,对于我的标记,"底部"div与"左"和"底"重叠.
我应该如何设计这3个元素来实现这种效果呢？
请注意,"bottom"不是页面上的最后一个元素.我只想将"左"和"右"放在一行中,并且页面流继续从以下行开始默认定位.
编辑:除了接受的答案...如果您没有静态高度或由于某种原因不想硬编码,您可以实现类似的效果:
<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div>
<div style="border:3px solid blue; width:25%; margin-left:72.5%">Right</div>
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>