兩個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的垂直對齊和間距

回答

相關問題