1.固定两栏布局，使用float，注意对紧邻元素清除浮动影响。IE6在使用float布局同时设置横行margin的情况下会有双边距BUG，解决方案是加入_display:inline
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>横向两列布局</title> <style type="text/css" > body{ padding:0; margin:0; } .wrapper{ width: 960px; margin:0 auto; } .header { height: 75px; background-color: #BD9C8C; margin-bottom: 5px; } .left{ width: 340px; height: 600px; margin-right: 20px; _display:inline;/*IE6双边距BUG*/ float: left; background-color:#E7DBD5; } .right{ width: 600px; height: 600px; _display:inline;/*IE6双边距BUG*/ float: left; background-color: #F2F2E6; } .footer { clear: both; /*清除浮动，非常重要，不可缺少*/ background-color: #BD9C8C; margin-bottom: 5px; } </style> </head> <body> <div class="wrapper"> <div class="header"> <h1>Header</h1> </div> <div class="left"> <h2>left</h2> </div> <div class="right"> <h2>right</h2> </div> <div class="footer"> <h2>Footer</h2> </div> </div> </body> </html>
2.左侧定宽，右侧自适应
方法一：
right相对父元素使用absolute定位并设置margin-left，需要注意：固定宽的列的高度>自适应宽度列的高度
代码如下：
View Code
方法二：
float和overflow配合可实现两列自适应效果，兼容IE6-浏览器需要设置zoom:1
.container{ overflow: hidden; } .left{ margin-right: 20px; float: left; width: 340px; height: 500px; background-color:#E7DBD5; } .right{ overflow: hidden; background-color: #F2F2E6; }