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之后,用户体验不好。