实现效果
一、float实现
<!DOCTYPE html>
<html>
<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>三栏布局——左右浮动布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 550px;
}
.container > div {
min-height: 200px;
}
.left {
float: left;
width: 200px;
background: #ffbbff;
}
.middle {
margin: 0 200px;
background: #bfefff;
}
.right {
float: right;
width: 200px;
background: #eeee00;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</div>
</body>
</html>
二、flex实现
请移步flex笔记
三、absolute实现
左右两边设置absolute，分别设置left为0、right为0，设置宽度，中间部分只需设置左右的margin即可。
<!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>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.floatLayout {
width: 100%;
height: 400px;
position: relative;
}
.left {
width: 200px;
position: absolute;
background-color: aqua;
height: 100%;
left: 0;
top: 0;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: bisque;
height: 100%;
}
.middle {
height: 100%;
background-color: yellow;
margin: 0 200px;
}
</style>
<body>
<div class="floatLayout">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
</body>
</html>四、grid实现
Grid网格布局实现非常简单，只需几行代码。
<!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>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.left {
background-color: aqua;
}
.right {
background-color: bisque;
}
.middle {
background-color: yellow;
}
.floatLayout {
width: 100%;
display: grid;
grid-template-columns: 200px auto 200px; /*三列，第一三列200px,二列自适应*/
grid-template-rows: 100px; /*行高，一个100px,代表一行*/
}
</style>
<body>
<div class="floatLayout">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
</body>
</html>五、table-cell
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三栏布局——table-cell布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: table;
width: 100%;
}
.container > div {
display: table-cell;
height: 100px;
}
.left {
background: #ffbbff;
width: 200px;
}
.middle {
background: #bfefff;
}
.right {
width: 150px;
background: #eeee00;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
总结：
1、float布局使用的时候一定要注意清除浮动。
2、Position布局只是根据定位属性来设置元素位置，不太适合用做页面布局。
3、flex布局虽然很好用，但是还是存在IE上的兼容性问题，只能支持到IE9以上。
4、grid网格布局很强大，但是兼容性很差。
5、table布局使用起来方便，兼容性也不存在问题，但是不利于搜索引擎抓取信息。
