將400像素寬的div水平居中全寬DIV中對齊與上邊距

請參閱此代碼將400像素寬的div水平居中全寬DIV中對齊與上邊距

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
    <!-- 
    .header { 
height: 200px; 
background-color: #CCCCCC; 
text-align: center; 
    } 
    .contents { 
background-color: #0099FF; 
text-align: center; 
height: 400px; 
    } 
    .footer { 
    background-color: #993300; 
height: 100px; 
    } 
    .footer .footer-contents { 
margin-top: 30px; 
margin-right: auto; 
margin-bottom: 30px; 
margin-left: auto; 
width: 700px; 
    } 
    --> 
    </style> 
    </head> 

    <body> 
    <div class="header">Header</div> 
    <div class="contents"> Body </div> 
    <div class="footer"> 
    <div class="footer-contents"> 
    Some contents goes here 
    </div> 
    </div> 


    </body> 
    </html>

我看到身體和頁腳之間的差距，因爲我已經把30PX上邊距爲頁腳，內容股利。爲什麼我可以把一個div放在另一個頂部邊距內，由於這個邊距，當你在瀏覽器中看到它時，整個頁腳div增加了30px的邊距，我可以通過添加填充而不是邊距來解決這個問題，但是我想知道如果我想在整頁100％寬的div內水平放置一個700px寬的div，並且我還想在內部div上添加一些邊距。

來源

2011-07-17 Sohail

將「footer-contents」div以外的內容添加到「footer」div。例如：

<div class='footer'>&nbsp; 
    <div class='footer-contents'> 
     Some contents goes here 
    </div> 
</div>

在這種情況下，我得到的保證金應用正確的內部股利。

http://jsfiddle.net/Fq64H/1/

希望這有助於。

鮑勃

來源

2011-07-17 19:34:16 rcravens

謝謝rcravens，只有有所作爲？我很驚訝，這是唯一的方法嗎？ – Sohail

將400像素寬的div水平居中全寬DIV中對齊與上邊距

回答

相關問題