三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在開發十分常見，那么什么是三欄布局？比如我打開某東的首頁：
映入眼簾的就是一個常見的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。
下面圍繞的這樣的目的，即左右模塊固定寬度，中間模塊隨瀏覽器變化自適應，想要完成的最終效果如下圖所示：
紅色和藍色寬度固定，綠色寬度自適應，下面七種方法實現的最終效果跟這個差不多，可能會稍有不同。
下面七種技巧各有千秋，在開發中可以根據實際需求選擇適合自己的方法進行編碼。
1. 流體布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
左右模塊各自向左右浮動，并設置中間模塊的 margin 值使中間模塊寬度自適應。
缺點就是主要內容無法最先加載，當頁面內容較多時會影響用戶體驗。
2. BFC 三欄布局
BFC 規則有這樣的描述：BFC區域，不會與浮動元素重疊。因此我們可以利用這一點來實現 3列布局。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
background-color: blue;
}
.main {
height: 200px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
缺點跟方法一類似，主要內容模塊無法最先加載，當頁面中內容較多時會影響用戶體驗。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局。
3. 雙飛翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
利用的是浮動元素 margin 負值的應用，感興趣的同學可以上網搜搜原理。
主體內容可以優先加載，HTML 代碼結構稍微復雜點。
4. 圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: red;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
跟雙飛翼布局很像，有一些細節上的區別，相對于雙飛翼布局來說，HTML 結構相對簡單，但是樣式定義就稍微復雜，也是優先加載內容主體。
5. Flex 布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
}
.main {
flex-grow: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;
flex: 0 1 200px;
margin-right: 20px;
height: 300px;
background-color: blue;
}
.right {
flex: 0 1 100px;
margin-left: 20px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
簡單實用，未來的趨勢，需要考慮瀏覽器的兼容性。
6. Table 布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: table;
width: 100%;
}
.left, .main, .right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: red;
}
.main {
background-color: blue;
}
.right {
width: 100px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
缺點：無法設置欄間距
7. 絕對定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
position: relative;
}
.main {
height: 400px;
margin: 0 120px;
background-color: green;
}
.left {
position: absolute;
width: 100px;
height: 300px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 300px;
background-color: blue;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
簡單實用，并且主要內容可以優先加載。
新聞熱點
疑難解答
