1. 表格布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: table;
width: 100%;
}
.main {
height: 200px;
background-color: green;
}
.left, .right, .main {
display: table-cell;
}
.left, .right {
width: 100px;
}
.left {
background-color: red;
}
.right {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
优点： 代码简单易懂 缺点： 无法设置栏间距
2. float + margin流体方案
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
overflow: auto;
}
.left, .right {
height: 200px;
width: 100px;
}
.left {
float: left;
background-color: red;
}
.right {
background-color: blue;
float: right;
}
.main {
margin-left: 100px;
margin-right: 100px;
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 值利用块级元素的特性使中间模块宽度自适应。
缺点: 内容较多时候先加载侧边栏
3. float + BFC 方案
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
overflow: auto;
}
.left, .right {
height: 200px;
width: 100px;
}
.left {
float: left;
background-color: red;
}
.right {
background-color: blue;
float: right;
}
.main {
overflow: auto;
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>
BFC 区域，不会与浮动元素重叠，这里与1中的唯一区别是主体利用BFC而不是margin进行流体定位
缺点也是侧边栏先加载
4. 双飞翼布局方案
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left, .right {
height: 200px;
width: 100px;
}
.left {
margin-left: -100%;
float: left;
background-color: red;
}
.right {
margin-left: -100px;
background-color: blue;
float: right;
}
.main {
margin: 0 100px;
height: 200px;
background-color: green;
}
.content {
float: left;
width: 100%
}
</style>
</head>
<body>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
利用的是浮动元素 margin 负值的应用
优点: 主体内容先加载
缺点: html结构比较复杂
5. 圣杯布局方案
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin: 0 100px;
}
.main {
float: left;
height: 200px;
background-color: green;
width: 100%;
}
.left, .right {
height: 200px;
width: 100px;
position: relative;
}
.left {
margin-left: -100%;
float: left;
background-color: red;
left: -100px;
}
.right {
margin-left: -100px;
background-color: blue;
float: right;
right: -100px;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
优点：也是主体内容先加载，html结构简单 缺点：css代码较为复杂，在宽度过小的时候布局会乱
6. flex 布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
}
.main {
flex: 1;
height: 200px;
background-color: green;
}
.left, .right {
height: 200px;
width: 100px;
}
.left {
background-color: red;
order: -1;
}
.right {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
优点：代码简洁 缺点：兼容性问题
- position + margin 定位方案
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
position: relative;
}
.main {
height: 300px;
margin: 0 100px;
background-color: green;
}
.left, .right {
position: absolute;
top: 0;
width: 100px;
height: 300px;
}
.left {
left: 0;
background-color: red;
}
.right {
background-color: blue;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
优点: 代码简单
缺点: - 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。 - 侧边栏无法撑起高度
