典型的三行兩列居中高度自適應div+css布局_html/css

下面給出一個實際的列子，附詳細說明。

首先可以將下列代碼復制到html文件中運行一下，在mozilla、opera和ie瀏覽其中，均可達到居中且自適應高度的要求。

header

right

1

2

3

left

footer

国产精品久久久久精品…-国产精品可乐视频最新-亚洲欧美重口味在线-欧美va免费在线观看

首先我們定義了body和頂部區域#header，這里面關鍵的是body中的text-align：center；以及header中的margin-left：auto和margin-right：auto；作用是似的header區域在瀏覽器中居中。注意：在IE中只需要定義body的text-align:center就可以居中了，但是在mozilla（firefox）中必須有margin：auto才可以。

接下來是left和right區域。為了是這兩列也能居中，現在其外部嵌套一層container，并且設置margin：auto，道理和上面一樣。這樣left和right整體的也居中了。

你也許奇怪，問什么在container和left、right之間還有一層mainbg，這個層有什么作用呢？這個層是用來定義背景的，那么為什么不直接在container中定義背景呢，而要在多套一層呢？原因還是mozilla（firefox）在作怪（你總不希望自己做的網頁在firefox和ie中顯示的效果不一樣吧），在ie中不需要多嵌套一層，在mozilla中，必須定義高度值才可以顯示背景，但是指定高度的話，又無法實現自適應高度的要求，所以多加了一層mainbg，竅門在與mainbg這個層的float：left；這樣定義，不指定高度也可以顯示背景。

最后定義的是底部的footer層。該層的關鍵點在于clear：both；這句話的作用是取消footer層的浮動繼承。否則，你會看到footer緊貼這header顯示，還是mozilla做得怪:)

按說到這里就over了,可是細心的朋友會看到left和right分別嵌套了一個層,這兩個層都使用了.text{margin:0px;padding:20px}，這又是為什么呢？原因是mozilla和ie對于盒子模型的解釋不一樣，直接定義margin、padding會造成mozilla和ie中顯示的不一致。所以，遇到ie和mozilla不一致的時候，往往多加一層會解決問題。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com