1.双飞翼布局
（1）父元素包含左中右三个盒子，中间盒子要优先渲染，所以要将中间盒子写在前面，且中间盒子要有一个子元素盒子；
（2）左中右三个盒子都设置左浮动；
（3）左边盒子定宽，设置margin-left:-100%；
（4）右边盒子定宽，设置margin-left:-右盒子宽度；
（5）中间盒子设置宽度为100%；
（6）中间盒子子盒子设置margin给转左右盒子留位置；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body,html{
width:100%;
height: 100%;
}
.parent{
height: 100%;
overflow: hidden;/*清除浮动*/
}
.left{
width:200px;
height: 100%;
background-color: chartreuse;
float:left;
margin-left:-100%;
}
.right{
width:200px;
height:100%;
background-color: chartreuse;
float:left;
margin-left:-200px;
}
.center{
width:100%;
height:100%;
float:left;
background-color: forestgreen;
}
.center .main{
margin:0 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="center">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
网友评论