一、通過浮動和margin-left

 <div class="left">左列
 </div>
 <div class="right">右列
 </div>
 <div class="footer">footer
 </div>

 <style type="text/css">
        *{<span style="font-family:Microsoft YaHei;">  </span>margin:0;  padding:0;  }
        body{  width: 800px;  margin:auto;  }
        .left{  background-color: red;  width:200px;  height:20px; <span style="color:#CC0000;"><strong> float: left;</strong> </span> }
        .right{  background-color: blueviolet;  height:30px;  <strong><span style="color:#CC0000;">margin-left: 220px;</span></strong>  }
        .footer{  background-color: coral;  clear: both;  }
 </style>

 

•  .left 設float：left
• .right 設margin-left=.left寬度+間距
• .footer 清除浮動
• 左右高度無限制
  

二、通過position和margin-left

<span style="font-size:12px;"><div class="left">左列
</div>
<div class="right">右列
</div>
<div class="footer">footer
</div></span>

<span style="font-size:12px;">*{  margin:0;  padding:0;}
body{  margin:auto;  width: 800px;}
.left{  background-color: red;  width:200px;  height:300px; <strong> <span style="color:#990000;">position:absolute;</span></strong>}
.right{  background-color: blueviolet;  height:500px;  <span style="color:#990000;"><strong>margin-left: 220px;</strong></span> }
.footer{  background-color: coral; }
</span>
 

注意：左列高度<右列高度

• .left 設絕對定位
• .right設margin-left=.left寬度+間距

三、通過position和偏移屬性

<div class="wrap">
    <div class="left">左列
    </div>
    <div class="right">右列
    </div>
 </div>
 <div class="footer">footer
 </div>

 *{  margin:0;  padding:0;}
body{  width: 800px;margin:auto; }
.wrap{  background-color: gray; <strong><span style="color:#990000;">position: relative;</span></strong> }
.left{  background-color: red; width:200px; height:500px;}
.right{  position:absolute;background-color: blueviolet; height:500px; <strong><span style="color:#990000;">left: 220px; top:0; right: 0;</span></strong>}
.footer{  background-color: coral;}
 

      注意：左列高度>右列高度

• 父包裹層.wrap 設定相對定位
• .right 根據父包裹層進行偏移 right:0使得與父包裹層無間隙

四、position和float

<span style="font-size:12px;"><style type="text/css">
        *{  margin:0; padding:0;}
        body{  margin:auto; width: 800px;}
        .wrap{ <strong><span style="color:#CC0000;"> position:relative; </span></strong>}
        .left{  background-color: red; height:500px;<strong><span style="color:#CC0000;"> float: left;</span></strong>}
        .right{  background-color: blueviolet; height:300px;<span style="color:#CC0000;"> position: absolute; left:220px; right:0;</span> }
        .footer{  background-color: coral;<strong><span style="color:#CC0000;"> clear: both; </span></strong>}
</style>
</span>

<div class="wrap">
    <div class="left">左列
    </div>
    <div class="right">右列
    </div>
</div>
<div class="footer">footer
</div>

      這個方法挺複雜的，其實通過三就可以實現

五、BFC