两个div的垂直对齐和间距

我被一个垂直对齐问题困住了。我有2个div。第一个具有自动高度（取决于浏览器大小），另一个具有固定的高度并位于页面的底部。另外，第二个div需要保证金。两个div的垂直对齐和间距

什么，我想要做一个确切的例子：

http://img199.imageshack.us/img199/9569/79106387.jpg

我想：

<html> 
<body> 
<style> 
* { margin: 0; padding: 0; } 
body { background: #a7daf6; } 
</style> 

<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6"> </div> 

<div style="width:200px; height:40px; position:absolute; background:#eee; bottom:0; opacity:0.6"> </div> 

</body> 
</html>

，但我不能给第二个div给予保证金。有任何想法吗？

来源

2011-02-02 mrpn

这个问题肯定已经消失了吗？ – sunn0 2011-02-02 22:44:05

当你申请`margin-top`时你期望看到什么？ – Sotiris 2011-02-02 22:44:56

删除margin-top如果我理解正确的话，你可以简单地应用到第一<div>这种风格：top:-42px。

如果您需要<div>内的内容，您可以添加另一个<div>与padding-top: 42px。

像这样：

Live Demo

<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6; top:-42px"> 
    <div style="padding-top:42px; color:#fff">hello</div> 
</div>

来源

2011-02-02 22:49:11 thirtydot

尝试添加此为第一个div：

<div style="width:200px; position:absolute; top:0px; bottom: 42px; background:#000; opacity:0.6"> </div>

，并从第二个

来源

2011-02-02 22:46:02 atlavis

这个也在工作。非常感谢 – mrpn 2011-02-02 23:15:22

给予任何元件的绝对位置会从文档的流程中删除。无关紧要的是其他元素不会受到影响。

来源

2011-02-02 22:57:23

两个div的垂直对齐和间距

回答

相关问题