一個不錯的css——之三行三列等高格局.

css——之三行三列等高格局.

(2011-07-23 05:23:42)

轉載▼

標籤：

雜談

第一步：創立一個構造
xhtml開始於header, footer, and container
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
CSS先定義container，給即將加入的sideleft，和sideright留下個位置
#container {
padding-left: 200px;
padding-right: 150px;
}
我們的格局目前看起來是這麼的
圖1——創立架構
第二步：添置內容元素
在第一步基礎上添置內容元素<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的飄拂對齊
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
這裡給center元素定義了100% width，讓它佔滿montainer的可用空間，目前的格局變成了這麼
圖2：添置內容元素
第三步：把left放到準確的位置
要把left放到準確的位置，我們分兩步
1.讓left和center在統一程度線#left {
width: 200px;
margin-left: -100%;
}
看看收穫
圖3——left挪動告終一半
2.用相對定位，把left繼續挪動到準確的位置#container .columns {
float: left;
position: relative;
}
#left {
width: 200px;
margin-left: -100%;
right: 200px;
}
讓left距離他右邊元素center 200px後，行了，left終於到自己位置上了
圖4——left到了自己的位置
第四步：讓right也到自己的準確的位置上
從看，我們只必需把right推倒container的padding-right裡面cowww.freety1.info.countingsheepboutique.com,看看怎麼做
#right {
width: 150px;
margin-right: -150px;
}
好了，目前元素們都準確歸位了。
圖5——right到了自己準確的位置
第五步：處理bug讓格局更健全
萬一博覽器視窗大小改變，center就變得比left小了，健全的格局就被突破，我們給body 設定一個min-width
來處理這個問題，因為IE不扶持他，因而不會有負面波及，調劑如下
body {
min-width: 550px;
}
這時在IE6（全面敞開的視窗）下，left元素翔實左側又太遠了，再調劑
* html #left {
left: 150px;
}
這些大小調劑是依據上面曾經定義的寬度來的，你調劑的時候也要依據自己的切實情形。
目前添置padding
內容文字貼著容器的邊，可信你看得時候，不會很舒服，調劑一下
#left {
width: 180px;
padding: 0 10px;
right: 200px;
margin-left: -100%;
}
當然不能只添置left就算完事，要給一系列元素都定然加上，也要調劑添置padding，帶來的新的bug，調劑如下
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -190px;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}header和footer的padding能夠容易添置，這裡就不提了，還有長度單位用em更具親和力（em能夠讓使用者利用博覽器來調劑自己必需的字型大小）
然而不能混雜利用，抉擇em和px的時候明智些,察看收穫
元素等高問題
批准om/tech/web/2006/3210.asp
裡提到的措施，就不翔實解釋了。
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px;
margin-bottom: -20000px;
}
#footer {
position: relative;
}
再處理opera 8的bug，代碼調劑如下
<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;
}到此全副過程告終，察看最後收穫,穿越w3c 規範型而不是靠漫無目標的博覽代碼來覺察訛謬，那麼代碼審查的收穫會事半功倍。

公安三所WebServices端測驗準備問題.