负margin-双飞翼布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> .sub{ float: left; width: 190px; margin-left: -100%; } .main{ float:left; width:100%; } .extra{ float:left; width:230px; margin-left: -230px; } .main-wrap{ margin:0 230px 0 190px; } </style> </head> <body> <div id="page"> <div id="hd">Header</div> <div id="bd"> <div class="main"> <div class="main-wrap"> <p>Main</p> </div> </div> <div class="sub"> <p>Sub</p> </div> <div class="extra"> <p>Extra</p> </div> </div> <div id="fd"> <p>footer</p> </div> </div> </body> </html>
优点,优先加载mian区域的内容,中间区域可根据屏幕尺寸变化自动伸缩,左右两栏则固定布局。