三列布局方法总结
实现三列布居结构代码:
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{padding:0; margin:0; } 8 .header{ background:#666; height:50px; line-height:50px; } 9 .wrap{ padding:0 300px 0 200px; overflow:hidden; } 10 .content{ background:#d6d6d6; float:left; width:100%; } 11 .left{ background:#e79f6d; float:left; width:200px; margin-left:-100%; position:relative; left:-200px; } 12 .right{ background:#7bd; float:left; width:300px; margin-left:-300px; position:relative; right:-300px; } 13 .footer{ background:#ccc; width:100%; height:50px; line-height:50px; } 14 .t2{margin-top:20px;} 15 .w2{overflow:hidden;} 16 .left2{ background:#e79f6d; float:left; width:200px; } 17 .content2{ background:#d6d6d6; overflow:hidden; height:50px; margin-right:300px;} 18 .right2{ background:#7bd; float:right; width:300px; margin-top:-50px; } 19 </style> 20 </head> 21 <body>
方法一： 22 <div class="t1"> 23 <div class="header">header</div> 24 <div class="wrap"> 25 <div class="content">content</div> 26 <div class="left">left</div> 27 <div class="right">right</div> 28 </div> 29 <div class="footer">footer</div> 30 </div> 31
方法二： 32 <div class="t2"> 33 <div class="header">header</div> 34 <div class="w2"> 35 <div class="left2">left2</div> 36 <div class="content2">content2</div> 37 <div class="right2">right2</div> 38 </div> 39 <div class="footer">footer</div> 40 </div> 41 </body> 42 </html>
效果图:
经过对比，两种方法，方法一更具可扩展性，因为方法二必须先对content进行高度设定，这样，会让一些对中间部分要求自适应的地方无法很好适用该方法~
以上
