在傳統方法的基礎上加入了Flex布局並闡述各方法的優缺點，希望對大家有所幫助。先上目錄：
兩列布局：左側定寬，右側自適應
方法一：利用float和負外邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> *{ margin: 0; padding: 0; } .main,.sitebar{ font: bolder 20px/300px; } .main{ width: 100%; float: left; } .main .content{ margin-left: 200px; background-color: red; } .sitebar{ width: 200px; float: left; background-color: green; margin-left: -100%; } </style>
</head>
<body>
<div class="main">
<div class="content">右側主體自適應區塊</div>
</div>
<div class="sitebar">左側定寬200px區塊</div>
</body>
</html>
優點：考慮了頁面優化，右側主內容區先加載，左側后加載。
缺點：多添加了一層div包裹。
方法二：利用外邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> *{ margin: 0; padding: 0; } .sitebar{ float: left; width: 200px; background-color: green; } .content{ background-color: red; margin-left: 200px; } </style>
</head>
<body>
<div class="sitebar">左側定寬200px區塊</div>
<div class="content">右側主體自適應區塊</div>
</body>
</html>
優點：代碼簡潔，便於理解
缺點：不利於頁面優化，右側主內容區后加載
方法三：利用position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> *{ margin: 0; padding: 0; } .sitebar{ width: 200px; background-color: green; } .content{ position: absolute; left: 200px; right: 0; top: 0; background-color: red; } </style>
</head>
<body>
<div class="content">右側主體自適應區塊</div>
<div class="sitebar">左側定寬200px區塊</div>
</body>
</html>
優點：考慮到了頁面優化，右側內容區先加載
缺點：目測沒有
上述三種方法兼容IE7以上，但在IE7下不設置高度時，會產生高度錯位bug。可通過設置父元素font-size=0，再分別設置子元素font-size解決。
方法四：利用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> *{ margin: 0; padding: 0; } .main{ display: flex; } .content{ flex:1; background-color: red; } .sitebar{ flex:0 0 200px; order:-1; background-color: green; } </span><span class="hljs-tag" style="color: #cc6666;"></<span class="hljs-title" style="color: #8abeb7;">style</span>></span>
</head>
<body>
<div class="main">
<div class="content">右側主體自適應區塊</div>
<div class="sitebar">左側定寬200px區塊</div>
</div>
</body>
</html>
優點：CSS3新布局方式，高大上
缺點：僅支持IE11+。
三列布局：左右定款，中間自適應。
方法一：使用負外邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> *{ margin: 0; padding: 0; } .main,.left,.right{ height: 300px; font: 20px/300px; color: #fff; text-align: center; } .main{ width: 100%; float: left; } .main .content{ margin: 0 300px 0 200px; background-color: black; } .left{ width: 200px; float: left; margin-left: -100%; background-color: red; } .right{ width: 300px; float: left; margin-left: -300px; background-color: blue; } </style>
</head>
<body>
<div class="main">
<div class="content">中間主體區域寬度自適應</div>
</div>
<div class="left">左側定寬200px</div>
<div class="right">右側定寬300px</div>
</body>
</html>
優點：兼容IE7+，考慮到頁面優化，中間內容區先加載
缺點：多一層div嵌套，不易理解
方法二：使用絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> body{ margin:0px; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 100px; position: absolute; top: 0px; left: 0px; } #center { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 102px; margin-left: 102px; } #right { background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 100px; position: absolute; top: 0px; right: 0px; } </style>
</head>
<body>
<div id="center">中列</div>
<div id="left">左列</div>
<div id="right">右列</div>
</body>
</html>
優點：代碼結構簡單，考慮到了頁面優化，中間內容去先加載
缺點：目測沒有
方法三：使用flex布局
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; background-color: green; } .HolyGrail-nav, .HolyGrail-ads {
/* 兩個邊欄的寬度設為12em */
flex: 0 0 200px;
background-color: blue;
}
.HolyGrail-nav {
/* 導航放到最左邊 */
order: -1;
background-color: grey;
}
</style>
</head>
<body>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
</body>
</html>
優點：高大上
缺點：僅支持IE11+