左右两栏固定宽度，中间自适应布局的5种方案
2016-12-30 本文已影响285人
JokerPeng
一个常用的布局问题就是左右两栏固定宽度，中间内容自适应，接下来介绍5种常用的解决方案。
1、float浮动
通过float，让左右2栏浮动到左边和右边，然后中间div需要放在左右两个div之后。
- 优点：浏览器的兼容性比较好
- 缺点：浮动会造成相关元素脱离文档流，需要做一些清除浮动的处理。另外当中间区域内容高度超出设定高度时候，会破坏三栏布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>float</title>
<style media="screen">
article div{
height: 200px;
}
.left{
float:left;
width:200px;
background: red;
}
.center{
background: yellow;
}
.right{
float:right;
width:200px;
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</article>
</body>
</html>
2、绝对定位
左中右三个div都需要设置绝对定位：position: absolute，左侧div设置left: 0靠左，右侧div同理设置right: 0靠右，中间div设置left和right值为左侧和右侧div的宽度。
- 优点：方便快捷
- 缺点：会造成子元素也一起脱离文档流，可使用性比较差。另外当中间区域内容高度超出设定高度时候，会破坏三栏布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> absolute </title>
<style media="screen">
article div{
height: 200px;
position: absolute;
}
.left{
left:0;
width: 200px;
background: red;
}
.center{
left: 200px;
right: 200px;
background: yellow;
}
.right{
right:0;
width: 200px;
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</article>
</body>
</html>
3、flex布局
首先设置包裹左中右三个div的父容器节点的布局为flex布局即display: flex，
左右div设置固定宽度，中间div设置flex: 1占满剩余的空间。
- 优点：比较完美的做法，移动端比较常见。当不给定三栏高度时，可以随区域内容高度的改变而改变。
- 缺点：兼容性不太好，IE11以下都不支持。且设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex</title>
<style media="screen">
article {
display: -webkit-flex; /* Safari */
display: flex;
}
article div{
height: 200px;
}
.left{
width: 200px;
background: red;
}
.center{
flex: 1;
background: yellow;
}
.right{
width: 200px;
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</article>
</body>
</html>
4、表格布局table
首先设置包裹左中右三个div的父容器节点的布局为table布局即display: table，且设置总的宽度为100%，左中右都设为table-cell，左右div设置固定宽度，中间div不设置宽度。
- 优点：比较完美的做法。当不给定三栏高度时，可以随区域内容高度的改变而改变。
- 缺点：兼容性不太好，IE11以下不支持，三栏高度会始终一致，如果只想对某一栏高度增加或减少是不行的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table</title>
<style media="screen">
article {
display: table;
width: 100%;
}
article div{
height: 200px;
display: table-cell;
}
.left{
width: 200px;
background: red;
}
.center{
background: yellow;
}
.right{
width: 200px;
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</article>
</body>
</html>
5、网格grid布局
首先设置包裹左中右三个div的父容器节点的布局为grid布局即display: grid，且设置总的宽度为100%，网格需要设置行和列，行高设置200px，即grid-template-rows: 200px;，同时有3列，左右各200px宽度，中间自适应，即grid-template-columns: 200px auto 200px;。
- 优点：比较新颖的做法
- 缺点：兼容性不太好，IE11以下不支持。另外当中间区域内容高度超出设定高度时候，会破坏三栏布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>grid</title>
<style media="screen">
article {
width:100%;
display: grid;
grid-template-rows: 200px;
grid-template-columns: 200px auto 200px;
}
.left{
background: red;
}
.center{
background: yellow;
}
.right{
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</article>
</body>
</html>
