三栏布局之双飞翼布局（两侧固定宽度，中间自适应）
作者：互联网
1、双飞翼布局
双飞翼布局是由淘宝开发人员提出，和圣杯布局有一些相似
2、原理
前四点都和圣杯布局一样
1.写结构，一个大盒子里放三个子元素，注意三个子元素的顺序：中-左-右
2.给三个子元素写float：left；
3.给左侧的盒子设置margin-left：-100%；
4.给右侧的盒子设置margin-left:-右侧盒子盒子宽度
5.给中间的盒子再放一个子元素，给这个子元素设置padding：0 右侧盒子的宽度 0 左侧盒子的宽度 或 设置margin：0 右侧盒子的宽度 0 左侧盒子的宽度
6.别忘记给父元素清除浮动
7.给大盒子设置最小宽度
代码：
<style>
.left{
width: 300px;
height: 200px;
background: pink;
float: left;
margin-left: -100%;
}
.center{
width: 100%;
height: 300px;
background:orange;
float: left;
}
.right{
width: 200px;
height: 200px;
background: skyblue;
float: left;
margin-left: -200px;
}
.centerMain{
background: green;
margin:0 200px 0 300px;
}
</style>
<body>
<!--
三栏布局：
左侧：300px;
中间：自适应
右侧：200px
-->
<div class="box">
<div class="center">
<div class="centerMain">中</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
效果：
到这大家会发现三个盒子的高不一样，那么怎么样才能实现等高布局了？
在我的随笔里也有一些简单的介绍哦！！！！
标签：float,盒子,布局,双飞翼,宽度,三栏,200px,margin,left 来源： https://www.cnblogs.com/huchangwu/p/11950488.html