首先，我先舉兩個例子，乙個是聖杯型布局，另外乙個是雙飛翼型。雙飛翼型是某博主由聖杯型參考後自創的乙個布局方式。
1. 聖杯型布局
嘗試之路考慮以下dom結構：
id="page">
id="hd">div>
id="bd">
class="main">div>
class="sub">div>
class="extra">div>
div>
id="ft">div>div>
利用浮動元素的負邊距來定位：
.main
.sub
.extra
乙個自然的想法是，給main的容器#bd新增padding:
#bd
這樣能讓main定位到正確的位置，但sub和extra的位置不對了。這是乙個思考的關卡。既然sub和extra的位置不對，那就想辦法調整到正確的位置。相對定位隆重登場：
.sub
.extra
3. 雙飛翼布局
在**ued內部的**中，給main增加了一層包裹：
id="main"
class="column">
id="main-content">#main
div>
裡層main-content的作用就是將main定位到合適的位置，並方便設定padding等屬性。想到此處，就像牛頓被蘋果砸傻了一樣，原來的main定位問題迎刃而解：
id="page">
id="bd">
class="main">div>
div>
div>
css僅需增加一行：
.main-wrap
content部分絕對定位，設定left:200px;right:230px;從而在兩邊空出兩塊來給sidebar和aside.
自創型title>
* .main
.header,.footer
.content
.sidebar
.aside
style>
head>
class="header">
headerp>
div>
class="main">
class="sidebar">sidebardiv>
class="content">contentdiv>
class="aside">asidediv>
div>
class="footer">footerdiv>
body>
html>
三列布局（左右固定寬度，中間自適應）
無標題文件title type text css left right middle style head id left div id right div id middle div body html 自己試了好幾次，但是右邊 div 總是另起一行排列，後來發現原來 html 中要先列出 lef...
二列左列寬度固定，右列寬度自適應布局
左邊固定值，右邊百分比佔完整螢幕的方法。1 用table當然很簡單了，左邊td固定值，右邊100 就ok了 2 div就不知道咋弄了，右邊100 肯定不能float到一行上去了。只好用js判斷瀏覽器的寬度然後減去左邊的寬度。3 不知道有沒有更好的解決辦法。2 xml lang zh cn lang ...
html 三列布局（兩列自適應，一列固定寬度）
原文 html 三列布局 兩列自適應，一列固定寬度 不做過多解釋 主要是記錄乙個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content ...