典型的三行二列居中高度自適應佈局

時間 2019-11-10

原文原文鏈接

典型的三行二列居中高度自適應佈局

如何使整個頁面內容居中，如何使高度適應內容自動伸縮。這是學習CSS佈局最多見的問題。下面就給出一個實際的例子，並詳細解釋。（本文的經驗和是藍色理想論壇xpoint、guoshuang共同討論得出的。） css

，這個頁面在mozilla、opera和IE瀏覽器中都可以實現居中和高度自適應。咱們來分析代碼： html

完整代碼

<html>
<head>
<style type="text/css">
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 776px;
} #mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>

代碼分析

首先咱們定義body和頂部第一行#header，這裏面的關鍵是body中的text-align:center;和header中的margin-right: auto;margin-left: auto;，經過這兩句使得header居中。注：其實定義text-align:center;就已經在IE中實現居中，但在mozilla中無效，須要設置margin:auto;才能夠實現mozilla中的居中。瀏覽器

接下來定義中間的兩列#right和#left。爲了使中間兩列也居中，咱們在它們外面嵌套一個層#contain，並對contain設置margin:auto;，這樣#right和#left就天然居中了。佈局

注意中間兩列定義的順序，咱們首先定義#right，經過float: right;讓它浮在#contain層的最右邊。而後再定義#left，經過float: left;讓它浮動在#right層的左面。這和咱們之前表格從左到右定義的順序正好相反(更正：先左後右、仍是先右後左均可以實現，根據本身須要設計)。學習

咱們看到代碼中在#contain和兩列之間還嵌套了一個層#mainbg，這個層是作什麼用的呢？這個層就是用來定義#contain的背景的。你確定會問，爲何不直接在#contain中定義背景，而要多套一層呢？那是由於在#contain中直接定義的背景，在mozilla中將顯示不出來，必須定義高度值才能夠。若是定義了高度值，#right層就沒法實現根據內容的自動伸縮。爲了解決背景和高度問題，就必須增長這麼一個#mainbg層。竅門在於#mainbh這個層定義float: left;，由於float使層自動有寬和高的屬性。(暫且這麼理解：) spa

最後是定義底部的#footer層。這個定義的關鍵是：clear:both;，這一句話的做用是取消#footer層的浮動繼承。不然的話，你會看到#footer緊貼着#header顯示，而不是在#right的下面。設計

主要的層定義完畢，這個佈局就ok了。補充一點：你看到我還定義了一個.text{margin:0px;padding:20px;}，這個class的做用是使內容的外圍有20px的空白。爲何不直接在#right裏定義margin或者padding呢，由於mozilla和IE對css盒模型的解釋不一致，直接定義margin/padding會形成mozilla里布局變形。我通常採用內部再套一層的作法來解決 code

這篇文章講最簡單的居中佈局很好用，兼容性也很強，板塊不是那麼死，我之前作的網頁大多都是固定板塊，很容易出現排版問題，這個要好的多，可自動隨窗口變化 htm