双飞翼,圣杯布局
css 布局
<style> /* 圣杯布局 */ /** * 1.先写大盒子100%宽 在写固定宽度的盒子 * 2.三个盒子都浮动 * 3.父元素写padding * 4.固定元素写定位relative */ .box>div{ float: left; height: 200px; } .box{ padding: 0 100px; } .main{ width: 100%; background: #f00; } .left{ width: 100px; background: #0f0; margin-left: -100%; position: relative; left: -100px; } .right{ width: 100px; background: #00f; margin-left: -100px; position: relative; right: -100px; } /* 双飞翼布局 */ .box>div{ float: left; height: 200px; } .main{ width: 100%; background: #f00; } .main .center{ margin: 0 100px; width: 100%; height: 100%; background: black; color: #fff; } .left{ width: 100px; background: #0f0; margin-left: -100%; } .right{ width: 100px; background: #00f; margin-left: -100px; } </style>
结构
<!-- 圣杯布局 --> <div class="box"> <div class="main"></div> <div class="left">111111</div> <div class="right">11111</div> </div> <!-- (淘宝)双飞翼布局 --> <div class="box"> <div class="main"> <div class="center">111111</div> </div> <div class="left">111111</div> <div class="right">11111</div> </div>