圣杯布局和双飞翼布局
布局要求:
1、三列布局,中间宽度自适应,两边定宽
2、中间栏要在浏览器中优先展示渲染
3、允许任意列的高度最高
4、用最简单的css、最少的HACK语句
圣杯布局:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> * { margin: 0; padding: 0; } body { min-width: 700px; } .header, .footer { float: left; width: 100%; background-color: #DDDDDD; height: 40px; line-height: 40px; text-align: center; } .container { padding: 0 220px 0 200px; } .left, .middle, .right { position: relative; float: left; min-height: 333px; } .middle { width: 100%; background-color: blueviolet; } .left { width: 200px; background-color: red; left: 0; margin-left: -100%; left: -200px; } .right { width: 220px; background-color: gold; margin-left: -220px; right: -220px; } </style> </head> <body> <div class="header"> 头 </div> <div class="container"> <div class="middle">中</div> <div class="left">左</div> <div class="right">右</div> </div> <div class="footer"> 尾 </div> </body> </html>
双飞翼布局:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { min-width: 700px; } .header, .footer { float: left; width: 100%; background-color: #DDDDDD; height: 40px; line-height: 40px; text-align: center; } .sub, .main, .extra { float: left; min-height: 300px; } .main { width: 100%; } .main-inner { margin-left: 200px; margin-right: 220px; background-color: #008FD8; min-height: 300px; } .sub { margin-left: -100%; width: 200px; background-color: blueviolet; } .extra { margin-left: -220px; width: 220px; background-color: red; } </style> </head> <body> <div class="header"> 头 </div> <div class="main"> <div class="main-inner"> 中 </div> </div> <div class="sub"> 左 </div> <div class="extra"> 右 </div> <div class="footer"> 尾 </div> </body> </html>
略懂,略懂....