詳解 CSS 七種三欄布局技巧

01-27

三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在開發十分常見，那麼什麼是三欄布局？比如我打開某東的首頁：

映入眼帘的就是一個常見的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。

下面圍繞的這樣的目的，即左右模塊固定寬度，中間模塊隨瀏覽器變化自適應，想要完成的最終效果如下圖所示：

紅色和藍色寬度固定，綠色寬度自適應，下面七種方法實現的最終效果跟這個差不多，可能會稍有不同。

下面七種技巧各有千秋，在開發中可以根據實際需求選擇適合自己的方法進行編碼。

1. 流體布局

<!DOCTYPE html>n<html lang="en">n<head>n <style>nt.left {nt float: left;nt height: 200px;nt width: 100px;nt background-color: red;nt}nt.right {nt width: 200px;nt height: 200px;nt background-color: blue;nt float: right;nt}nt.main {nt margin-left: 120px;nt margin-right: 220px;nt height: 200px;nt background-color: green;nt}n </style>n</head>n<body>n <div class="container">n <div class="left"></div>n <div class="right"></div>n <div class="main"></div>n </div>n</body>n</html>n

左右模塊各自向左右浮動，並設置中間模塊的 margin 值使中間模塊寬度自適應。

缺點就是主要內容無法最先載入，當頁面內容較多時會影響用戶體驗。

2. BFC 三欄布局

BFC 規則有這樣的描述：BFC 區域，不會與浮動元素重疊。因此我們可以利用這一點來實現 3 列布局。

<!DOCTYPE html>n<html lang="en">n<head>n <style>nt.left {nt float: left;nt height: 200px;nt width: 100px;nt margin-right: 20px;nt background-color: red;nt}nt.right {nt width: 200px;nt height: 200px;nt float: right;nt margin-left: 20px;nt background-color: blue;nt}tnt.main {nt height: 200px;nt overflow: hidden;nt background-color: green;nt}n </style>n</head>n<body>n <div class="container">n <div class="left"></div>n <div class="right"></div>n <div class="main"></div>n </div>n</body>n</html>n

缺點跟方法一類似，主要內容模塊無法最先載入，當頁面中內容較多時會影響用戶體驗。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局。

3. 雙飛翼布局

<!DOCTYPE html>n<html lang="en">n<head>n <style>n .content {n t float: left;n t width: 100%;n }n .main {n t height: 200px;n t margin-left: 110px;n t margin-right: 220px;n t background-color: green;n }nt.left {nt float: left;nt height: 200px;nt width: 100px;nt margin-left: -100%;nt background-color: red;nt}nt.right {nt width: 200px;nt height: 200px;nt float: right;nt margin-left: -200px;nt background-color: blue;nt}tn </style>n</head>n<body>n <div class="content">n <div class="main"></div>n </div>n <div class="left"></div>n <div class="right"></div>n</body>n</html>n

利用的是浮動元素 margin 負值的應用，感興趣的同學可以上網搜搜原理。

主體內容可以優先載入，HTML 代碼結構稍微複雜點。

4. 聖杯布局

<!DOCTYPE html>n<html lang="en">n<head>n <style>nt.container {nt margin-left: 120px;nt margin-right: 220px;nt}nt.main {nt float: left;nt width: 100%;nt height: 300px;nt background-color: red;nt}nt.left {nt float: left;nt width: 100px;nt height: 300px;nt margin-left: -100%;nt position: relative;nt left: -120px;nt background-color: blue;nt}nt.right {nt float: left;nt width: 200px;nt height: 300px;nt margin-left: -200px;nt position: relative;nt right: -220px;nt background-color: green;nt}n </style>n</head>n<body>n <div class="container">nt<div class="main"></div>nt<div class="left"></div>nt<div class="right"></div>n </div>n</body>n</html>n

跟雙飛翼布局很像，有一些細節上的區別，相對於雙飛翼布局來說，HTML 結構相對簡單，但是樣式定義就稍微複雜，也是優先載入內容主體。

5. Flex 布局

<!DOCTYPE html>n<html lang="en">n<head>n <style>nt.container {n display: flex;nt}nt.main {n flex-grow: 1;nt height: 300px;nt background-color: red;nt}nt.left {nt order: -1;nt flex: 0 1 200px;nt margin-right: 20px;nt height: 300px;nt background-color: blue;nt}nt.right {nt flex: 0 1 100px;n margin-left: 20px;nt height: 300px;nt background-color: green;nt}n </style>n</head>n<body>n <div class="container">nt<div class="main"></div>nt<div class="left"></div>nt<div class="right"></div>n </div>n</body>n</html>n

簡單實用，未來的趨勢，需要考慮瀏覽器的兼容性。

6. Table 布局

<!DOCTYPE html>n<html lang="en">n<head>n <style>n .container {nt display: table;nt width: 100%;n }n .left, .main, .right {nt display: table-cell;n }n .left {nt width: 200px;nt height: 300px;nt background-color: red;n }n .main {nt background-color: blue;n }n .right {nt width: 100px;nt height: 300px;nt background-color: green;n }n </style>n</head>n<body>n <div class="container">nt<div class="left"></div>nt<div class="main"></div>nt<div class="right"></div>n </div>n</body>n</html>n

缺點：無法設置欄間距

7. 絕對定位布局

<!DOCTYPE html>n<html lang="en">n<head>n <style>nt.container {nt position: relative;nt}nt.main {nt height: 400px;nt margin: 0 120px;nt background-color: green;nt}nt.left {nt position: absolute;nt width: 100px;nt height: 300px;nt left: 0;nt top: 0;nt background-color: red;nt}nt.right {nt position: absolute;nt width: 100px;nt height: 300px;nt background-color: blue;n right: 0;nt top: 0;nt}n </style>n</head>n<body>n <div class="container">n <div class="main"></div>nt<div class="left"></div>nt<div class="right"></div>n </div>n</body>n</html>n

簡單實用，並且主要內容可以優先載入。