双飞翼布局主要解决俩问题:1、三列布局,中间宽度自适应,两边定宽; 2、中间栏要在浏览器中优先展示渲染。
圣杯布局:思路是把左列left 右列right 主列middle分别浮动,然后用负外边距给左右两列进行定位;
css:
<style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .left, .middle, .right{ position: relative; float: left; min-height: 130px; } .container{ padding:0 220px 0 200px; overflow: hidden; } .left{ margin-left: -100%; left: -200px; width: 200px; background: red; } .right{ margin-left: -220px; right: -220px; width: 220px; background: green; } .middle{ width: 100%; background: blue; word-break: break-all; } </style>
html:
<div class="container"> <div class="middle"> </div> <div class="left"> </div> <div class="right"> </div> </div>
双飞翼布局:第一步和圣杯布局一样,浮动三列,给左右两列设置负外边距;同样会覆盖主列main,双飞翼布局的做法是在主列main后面添加了一个宽度为100%的div,再设置主列main的左右边距。
css:
*{margin: 0;padding: 0;} body{min-width: 700px;} .sub, .main, .extra{ float: left; min-height: 130px; } .sub{ margin-left: -100%; width: 200px; background: red; } .extra{ margin-left: -220px; width: 220px; background: blue; } .main{ width: 100%; } .main-inner{ margin-left: 200px; margin-right: 220px; min-height: 130px; background: green; }
html:
<div class="main"> <div class="main-inner"> </div> </div> <div class="sub"> </div> <div class="extra"> </div>