1、三列布局需求
网页中，常见的实现3列布局，左右两边宽宽固定，中间自适应的布局。本节介绍一种，最简单的实现思路，利用div浮动特性实现。
2、实现思路
在网页中依次编写 left、right、center 三个div，注意一定要左右中，这样的编写顺序。让left的div向左浮动，让right的div向右浮动。同时设置Center的左边距，和右边距，这样就实现了一个三列布局。
3、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.left{
width:200px;
height:600px;
float:left;
border: 1px solid red;
}
.right{
width:200px;
height:600px;
border: 1px solid blue;
float: right;
}
.center{
height:600px;
background :gray;
margin-left: 202px;
margin-right: 202px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
4、运行效果
三列布局运行效果
5、布局缺陷
（1） center 区的渲染，在left和right之后，用户体验不好。
网友评论