简介
本文用示例介绍CSS三列布局的方案。
三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第2种方案
中间固定，两边自适应，一般不太常用。比如：一个网站要适应不同的电脑屏幕大小，一般是确定两边的宽度，中间自适应。
中间固定，两边自适应，一共有如下几种方案：
- flex布局（推荐）
- 浮动布局（float）
- calc计算
- grid布局
- 负的margin布局（不推荐）
方案1：flex(推荐)
利用flex-grow进行布局，详见 flex-grow属性。
优点
- 简单
缺点
- 不兼容旧浏览器
示例
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置，默认为8px*/
}
.container>div {
height: 100px;
}
.container {
display:flex;
flex-direction:row;
}
.aside-left {
flex-grow: 1;
width: 300px;
background-color: #a9ff29;
}
.middle {
width:1600px;
left: 300px;
right: 200px;
background-color: #ffb91b;
}
.aside-right {
flex-grow: 1;
width: 200px;
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="aside-left">左侧</div>
<div class="middle">中间</div>
<div class="aside-right">右侧</div>
</div>
</body>
</html>
结果
方案2：浮动(float)
优点
- 兼容旧浏览器
缺点
- 主体内容需要放到最后，当页面元素较多时候对开发不友好。
示例
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置，默认为8px*/
}
.container>div {
height: 100px;
}
.aside-left, .aside-right {
float: left;
width: 300px;
background-color: #a9ff29;
}
.middle {
margin: 0 200px 0 300px;
background-color: #ffb91b;
}
.aside-right {
float: right;
width: 200px;
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="aside-left">左侧</div>
<div class="aside-right">右侧</div>
<div class="middle">中间</div>
</div>
</body>
</html>
结果
方案3：采用calc计算
优点
- 兼容旧浏览器
缺点
- 两边只能一样宽。
示例
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置，默认为8px*/
}
.container>div {
height: 100px;
}
.container {
width: 100%;
}
.aside-left {
float: left;
width: calc(50% - 800px);
background-color: #a9ff29;
}
.middle {
float: left;
width: 1600px;
background-color: #ffb91b;
}
.aside-right {
float: left;
width: calc(50% - 800px);
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="aside-left">左侧</div>
<div class="middle">中间</div>
<div class="aside-right">右侧</div>
</div>
</body>
</html>
结果
方案4：网格(grid)（不推荐）
网格布局是比较新的东西，这个布局是新的css标准下的特性。在响应式布局大行其道的移动互联网时代，bootstrap之类的是对栅格化布局框架非常流行，而网格布局，就是对栅格布局的标准化实现。
优点
- 简单、清晰
缺点
- 两边只能一样宽。
- 新CSS标准的特性，兼容性不太好
示例
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置，默认为8px*/
}
.container {
display:grid;
grid-template-rows: 100px;
grid-template-columns: auto 1600px auto;
}
.middle {
background-color: #ffb91b;
}
.aside-left {
background-color: #a9ff29;
}
.aside-right {
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="aside-left">左侧</div>
<div class="middle">中间</div>
<div class="aside-right">右侧</div>
</div>
</body>
</html>
结果
方案5：负的margin(不推荐)
比较麻烦。两边和中间的元素都要在外边套一个div，然后用margin控制。本处忽略不写了。
