标签：元素 div float content 相对 中间 设置 box 左右
圣杯布局：两边固定，中间自适应；
元素代码：
<div class="box"> <div class="content"> </div> <div class="left">左</div> <div class="right">右</div> </div>
布局代码：
双飞翼布局：
给中间部分在套上一层容器，这样做以后，大的容器就不再需要设置padding值，左右栏盒子也不用再设置相对布局，代码精简了很多，而且不会出现变的特别窄布局会乱掉的问题。
<div class="box"> <div class="cont"> <div class="center"> 内容 </div> </div> <div class="left"> 左 </div> <div class="right"> 右 </div> </div>
布局代码：
.box{ width: 800px; height: 400px; border:1px solid red; margin:100px auto; } .box>div{ float: left; height: 400px; } .cont{ width: 100%; } .center{ background: red; margin: 0 200px; height: 400px; } .left{ background: blue; width: 200px; margin-left: -100%; } .right{ background: pink; width: 200px; margin-left: -200px; }
构造效果是这样，
标签：元素 div float content 相对 中间 设置 box 左右
原文地址：https://www.cnblogs.com/inundate/p/11502748.html
