css——之三行三列等高布局圖文教程_經驗交流

來源:互聯網
上載者:User
http://www.alistapart.com/articles/holygrail
這個翻譯的頁面著作權歸greengnn所有,轉載請註明出處

第一步:建立一個結構

xhtml開始於header, footer, and container






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

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


我們的布局現在看起來是這樣的

740)?'740px':'auto'}" alt=uploads/200602/13_074820_diagram_01.gif src="http://files.jb51.net/upload/2007428212947610.gif">



圖1——建立架構

第二步:增加內容元素

在第一步基礎上增加內容元素










然後分別定義widths和float 讓元素排列在一條線上,還有清除footer的浮動對齊

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


這裡給center元素定義了100% width,讓它佔滿montainer的可用空間,現在的布局變成了這樣

740)?'740px':'auto'}" alt=uploads/200602/13_074922_diagram_02.gif src="http://files.jb51.net/upload/2007428212948399.gif">



圖2:增加內容元素

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

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

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

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


看看效果

740)?'740px':'auto'}" alt=uploads/200602/13_075000_diagram_03.gif src="http://files.jb51.net/upload/2007428212948874.gif">



圖3——left移動完成一半

2.用相對定位,把left繼續移動到正確的位置

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


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

740)?'740px':'auto'}" alt=uploads/200602/13_075037_diagram_04.gif src="http://files.jb51.net/upload/2007428212948583.gif">



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

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

從看,我們只需要把right推倒container的padding-right裡面,看看怎麼做

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


好了,現在元素們都正確歸位了。

740)?'740px':'auto'}" alt=uploads/200602/13_075115_diagram_05.gif src="http://files.jb51.net/upload/2007428212949621.gif">



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

第五步:解決bug讓布局更完美
如果瀏覽器視窗大小變更,center就變得比left小了,完美的布局就被打破,我們給body 設定一個min-width
來解決這個問題,因為IE不支援他,所以不會有負面影響,調整如下

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


這時在IE6(完全開啟的視窗)下,left元素具體左側又太遠了,再調整

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


這些大小調整是根據上面已經定義的寬度來的,你調整的時候也要根據自己的實際情況。

現在增加padding

內容文字貼著容器的邊,相信你看得時候,不會很舒服,調整一下

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


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

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可以讓使用者使用瀏覽器來調整自己需要的字型大小)

但是不能混合使用,選擇em和px的時候明智些,察看效果

元素等高問題
採用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,代碼調整如下



* 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 */
}
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.