填充一定百分比的屏幕寬度

我有一個主要的容器div，我希望它完全從屏幕的頂部保留，例如，屏幕寬度爲10%。這樣我就不會有非統一的屏幕尺寸等問題。填充一定百分比的屏幕寬度

我已經找到了一個骯髒的解決方法，這是一個1px by 1px圖像的背景顏色，在div之前，然後將其樣式有屏幕寬度的10%。但是這看起來很骯髒，不是嗎？有沒有更好的解決方案？

2012-12-24 Matteo Monti

你試過了什麼，你能顯示你的代碼嗎？ – Selvamani

我覺得非常優雅的解決方案是將頁面插入表格中，從正文後面開始，在其之前終止。

你必須這樣：

<html> 
<head><title>...</title></head> 
<body> 
<table id="content"><tr><td> 

    Your whole page comes here... 

</td></tr></table> 
</body> 
</html>

現在只是決定頁面的大小，使用樣式：

#content { 

    width: 850px; 
    margin-left: auto; 
    margin-right: auto; 

}

來源

2012-12-24 13:40:58 Rubens

但是，這肯定是一個糟糕的主意，因爲表格並不意味着它們用於10年前以前的佈局。表格只能用於顯示錶格數據。 –

爲了達到這個目的，我真的看不出有什麼問題：這是一個完全跨瀏覽器的解決方案;它不需要任何技巧性的附魔來使其工作;它確實有效。不使用某些東西只是因爲它很舊，實際上是我能夠在這裏看到的唯一可怕的事情。 – Rubens

這是我最喜歡的帖子之一，爲什麼不使用表格進行佈局。我希望它有助於改變你的意見：http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html –

相同的解決方案爲魯本斯，而無需使用表。我還放置了一些代碼來處理您詢問的頂部邊距，但使用填充代替。

<html> 
<head> 
<title>...</title></head> 
<body> 
    <div id="content"> 
    Your whole page comes here... 
    </div> 
</body> 
</html> 


* { 
    padding:0; 
    margin:0; 
} 

html, body { 
    height:100%; 
} 

body { 
    padding:10% 0 0; 
} 

#content { 
    width: 850px; // replace with your desired width 
    margin:0 auto; 
}

來源

2012-12-24 15:48:48

+1非常好的解決方案;我將在下一次使用這個頁面時使用它！ – Rubens

填充一定百分比的屏幕寬度

回答

相關問題