本文主要討論左右邊欄固定寬度，中間欄填滿其餘空間的佈局。至於其他型別，基本上也就是半斤和八兩。每一種佈局都會有個Demo，個人依然認為文章裡帖程式碼並沒有Demo來的直接。所以正文負責解釋，原始碼參見Demo。其中討論了這麼多種（6種）佈局，有以下理由：1是每種佈局也都有他的毛病，沒有十全十美的，每種佈局也都有人在用。2是雖然有相對優秀的方案，但是不優秀的方案也有有用的東西在裡邊，可能會啟發其他的思路補充遺漏的知識點。
1. 利用絕對定位特點：
左右兩欄採用絕對定位抽離文件流，分別固定於頁面的左右兩側，中間欄用左右margin值撐開可以容納左右邊欄的距離。這個很簡單不多解釋。 Demo:absoluteLayout
2. 利用兩側浮動都不佔據文件流：
左欄左浮動，右欄右浮動，中間欄左右margin值等於左右欄寬度。html中，中間欄要放在左右邊欄的後邊。道理上和絕對定位差不多，就是不佔文件流了其他元素就填充上了，只要把兩邊留出空間不導致重合即可。 Demo：twoSidesFloatLayoutDemo
3. 利用浮動和margin負值的特點：
標籤順序為<middle></middle> <left></left> <right></right> middle 寬度 100%，sub 左右 margin 為左右欄留出空間,其中 sub 元素不要浮動，否則會包裹裡面的內容而不會撐滿空間，其他元素全部左浮動。left 的 margin-left 為－100%，right 的margin-left為sub的負的margin-right 。浮動的特點就是緊跟著前一個元素，放不下了就換行，本來middle元素佔滿了第一行，sub元素的margin留出的空間並不會給其他的浮動元素，左欄被迫換行，處於第二行最左側，相當於緊跟著第一行後邊，100%的負margin－left會讓他從緊跟著第一行變成第一行最左邊，這時左欄和sub元素的margin－left留出的空間重合，達到目的，此時右欄在原來左欄的位置，再用類似的處理方式，達到最終效果。其中sub的margin可以換為padding，相同的原理和效果。此處如果不需要撐滿空間（有內容撐滿sub）可以不要父元素（即middle）。Demo：floatLayoutDemo。說的有點亂其實就是這個樣子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{margin: 0;padding: 0;height: 100%;}
.l,.r,#main{
text-align: center;
float:left;
}
#main{
width: 100%;
}
.l{
width: 100px;
margin-left: -100%;
background-color: #aaaaaa;
}
.c{
text-align: center;
margin-left: 100px;
margin-right: 200px;
background-color: #555555;
}
.r{
width: 200px;
margin-left: -200px;
background-color: #aaaaaa;
}
</style>
</head>
<body>
<div id="main">
<div class="c">
我中間
</div>
</div>
<div class="l">
我左邊
</div>
<div class="r">
我右邊
</div>
</body>
</html>
4. 利用inline-block特點：
父元素包含左中右欄：（子元素順序中，左，右）父元素設定padding為左右欄留出空間，然後中欄寬度100%佔據除padding外的空間，左右欄利用margin－left等於自身寬的負值使其與中欄右邊界重合，再調節left，左欄left為－100%右欄left為右欄寬度。左中右欄全部為子元素，所以margin－left無法佔據padding空間，需要左右邊欄相對定位後調解left值達到目標狀態。其中注意父元素設定font-size: 0; letter-spacing: -4px; 子元素再重置這兩個屬性。 Demo：inlineBlockLayoutDemo。說的有點亂，其實就是這個樣子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{margin: 0;padding: 0;height: 100%;}
.l,.c,.r{
display: inline-block;
font-size: 16px;
letter-spacing: normal;
}
.l{
width: 100px;
margin-left: -100px;
position: relative;
left: -100%;
}
.c{
width:100%;
background-color: #555555;
}
.r{
position: relative;
width: 200px;
margin-left: -200px;
left: 200px;
}
#box{
text-align:center;
padding-left: 100px;
padding-right: 200px;
background-color: #aaaaaa;
font-size: 0;
letter-spacing: -4px;
}
</style>
</head>
<body>
<div id="box">
<div class="c">
我中間
</div>
<div class="l">
我左邊
</div>
<div class="r">
我右邊
</div>
</div>
</body>
</html>5. 利用calc屬性和inline－block特點：
父元素設定（同樣是父元素包含左中右欄）： text-align:center; font-size: 0; letter-spacing: -4px; 左中右欄再重置： font-size: 16px; letter-spacing: normal; 左右欄固定寬度， html中元素順序為：左，中，右 ，假設左右欄寬度和300px；中間攔： width:calc(100% - 300px); 百分比與固定寬度混合佈局使用，支援ie9+，注意＋－＊／號兩邊留空格 Demo：useCalcLayoutDemo
6. 利用flex佈局：
flex佈局我認為是最先進而方便的佈局，非常靈活不過內容也不少，只可惜相容ie10+。不在這多廢話，推薦阮一峰老師的教程：flex教程。 父元素display:flex; ，左右兩欄設定flex-basis 預置寬度，中間欄flex-grow: 1;自動伸展。完活。 Demo：flexLayoutDemo