CSS布局之两列布局一列固定一列自适应

一、通过浮动和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

       CSS之BFC详解

       深入理解BFC和Margin Collapse