主頁 > 知識(shí)庫 > css——之三行三列等高布局圖文教程

css——之三行三列等高布局圖文教程

熱門標(biāo)簽:荒野大鏢客2地圖標(biāo)注怎么變中文 北川縣地圖標(biāo)注 移動(dòng)400辦理電話 山西旅游景地圖標(biāo)注 蘇州通信外呼系統(tǒng)多少錢 武漢人工外呼系統(tǒng) 中國地圖標(biāo)注各省份 沈陽智能外呼系統(tǒng)排名 上古卷軸5地圖標(biāo)注mod

http://www.alistapart.com/articles/holygrail
這個(gè)翻譯的頁面版權(quán)歸greengnn所有,轉(zhuǎn)載請(qǐng)注明出處

第一步:創(chuàng)建一個(gè)結(jié)構(gòu)

xhtml開始于header, footer, and container

div id="header">/div>

div id="container">/div>

div id="footer">/div>


CSS先定義container,給將要加入的sideleft,和sideright留下個(gè)位置

#container {
 padding-left: 200px; /* LC width */
 padding-right: 150px; /* RC width */
}


我們的布局現(xiàn)在看起來是這樣的

uploads/200602/13_074820_diagram_01.gif



圖1——?jiǎng)?chuàng)建框架

第二步:增加內(nèi)容元素

在第一步基礎(chǔ)上增加內(nèi)容元素

div id="header">/div>

div id="container">
 div id="center" class="column">/div>
 div id="left" class="column">/div>
 div id="right" class="column">/div>
/div>

div id="footer">/div>


然后分別定義widths和float 讓元素排列在一條線上,還有清除footer的浮動(dòng)對(duì)齊

#container .column {
 float: left;
}
#center {
 width: 100%;
}
#left {
 width: 200px; /* LC width */
}
#right {
 width: 150px; /* RC width */
}
#footer {
 clear: both;
}


這里給center元素定義了100% width,讓它占滿montainer的可用空間,現(xiàn)在的布局變成了這樣

uploads/200602/13_074922_diagram_02.gif



圖2:增加內(nèi)容元素

第三步:把left放到正確的位置

要把left放到正確的位置,我們分兩步

1.讓left和center在同一水平線

#left {
 width: 200px; /* LC width */
 margin-left: -100%;
}


看看效果

uploads/200602/13_075000_diagram_03.gif



圖3——left移動(dòng)完成一半

2.用相對(duì)定位,把left繼續(xù)移動(dòng)到正確的位置

#container .columns {
 float: left;
 position: relative;
}
#left {
 width: 200px; /* LC width */
 margin-left: -100%;
 right: 200px; /* LC width */
}


讓left距離他右邊元素center 200px后,行了,left終于到自己位置上了

uploads/200602/13_075037_diagram_04.gif



圖4——left到了自己的位置

第四步:讓right也到自己的正確的位置上

從上圖看,我們只需要把right推倒container的padding-right里面,看看怎么做

#right {
 width: 150px; /* RC width */
 margin-right: -150px; /* RC width */
}


好了,現(xiàn)在元素們都正確歸位了。

uploads/200602/13_075115_diagram_05.gif



圖5——right到了自己正確的位置

第五步:解決bug讓布局更完美
如果瀏覽器窗口大小變更,center就變得比left小了,完美的布局就被打破,我們給body 設(shè)置一個(gè)min-width
來解決這個(gè)問題,因?yàn)镮E不支持他,所以不會(huì)有負(fù)面影響,調(diào)整如下

body {
 min-width: 550px; /* 2x LC width + RC width */
}


這時(shí)在IE6(完全打開的窗口)下,left元素具體左側(cè)又太遠(yuǎn)了,再調(diào)整

* html #left {
 left: 150px; /* RC width */
}


這些大小調(diào)整是根據(jù)上面已經(jīng)定義的寬度來的,你調(diào)整的時(shí)候也要根據(jù)自己的實(shí)際情況。

現(xiàn)在增加padding

內(nèi)容文字貼著容器的邊,相信你看得時(shí)候,不會(huì)很舒服,調(diào)整一下

#left {
 width: 180px; /* LC fullwidth - padding */
 padding: 0 10px;
 right: 200px; /* LC fullwidth */
 margin-left: -100%;
}


當(dāng)然不能只增加left就算完事,要給一系列元素都必須加上,也要調(diào)整增加padding,帶來的新的bug,調(diào)整如下

body {
 min-width: 630px; /* 2x (LC fullwidth +
 CC padding) + RC fullwidth */
}
#container {
 padding-left: 200px; /* LC fullwidth */
 padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
 position: relative;
 float: left;
}
#center {
 padding: 10px 20px; /* CC padding */
 width: 100%;
}
#left {
 width: 180px; /* LC width */
 padding: 0 10px; /* LC padding */
 right: 240px; /* LC fullwidth + CC padding */
 margin-left: -100%;
}
#right {
 width: 130px; /* RC width */
 padding: 0 10px; /* RC padding */
 margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
 clear: both;
}

/*** IE Fix ***/
* html #left {
 left: 150px; /* RC fullwidth */
}

header和footer的padding可以隨意增加,這里就不提了,還有長度單位用em更具親和力(em可以讓用戶使用瀏覽器來調(diào)整自己需要的字體大?。?br>
但是不能混合使用,選擇em和px的時(shí)候明智些,察看效果

元素等高問題
采用http://www.positioniseverything.net/articles/onetruelayout/equalheight
有人翻譯過來的:http://www.blueidea.com/tech/web/2006/3210.asp
里提到的方法,就不具體解釋了。

#container {
 overflow: hidden;
}
#container .column {
 padding-bottom: 20010px; /* X + padding-bottom */
 margin-bottom: -20000px; /* X */
}
#footer {
 position: relative;
}


再解決opera 8的bug,代碼調(diào)整如下

div id="footer-wrapper">
 div id="footer">/div>
/div>
* html body {
 overflow: hidden;
}
* html #footer-wrapper {
 float: left;
 position: relative;
 width: 100%;
 padding-bottom: 10010px;
 margin-bottom: -10000px;
 background: #fff; /* Same as body
 background */
}

標(biāo)簽:海東 陽泉 邯鄲 遼源 南充 喀什 東莞 濱州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《css——之三行三列等高布局圖文教程》,本文關(guān)鍵詞  css,之,三行,三列,等高,布局,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《css——之三行三列等高布局圖文教程》相關(guān)的同類信息!
  • 本頁收集關(guān)于css——之三行三列等高布局圖文教程的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章