css布局之三列布局中间自适应

一、通过float浮动

          

<div class="left">
左边
</div>
<div class="right">
右边
</div>
<div class="center">
中间
</div>

       .left{
           background-color: crimson;
           width: 300px;
          <span style="color:#CC0000;"><strong> float:left;</strong></span>
       }
       .center{
           background-color: burlywood;
          <strong><span style="color:#CC0000;"> margin-left:320px;
          margin-right: 220px;</span></strong>

       }
       .right{
           background-color: blanchedalmond;
<pre name="code" class="css">           width: 200px;

  float: right; }

• 要先渲染左右，然后渲染中间

二、通过position进行偏移

     <div class="left">
         左边
     </div>
     <div class="center">
         中间
     </div>
     <div class="right">
         右边
     </div>

       body{
           margin:0;
           padding:0;
       }
       .left{
           background-color: crimson;
           width: 300px;

       }
       .center{
           background-color: burlywood;
          <strong><span style="color:#CC0000;"> position: absolute;</span></strong>
           left:320px;
           right: 220px;
           top:0;

       }
       .right{
           background-color: blanchedalmond;
           <strong><span style="color:#CC0000;">position:absolute;</span></strong>
           width: 200px;
           right:0;
           top:0;
       }

• 先确定.left的位置
• 再设置position：absolute进行相对偏移

三、双飞翼布局

<div class="center">
    <div class="center-content">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>

       .center{
           float: left;
           width: 100%;
           background-color: pink;
       }
       .center-content{
           margin: 0 200px 0 150px;
       }
       .left{
           float: left;
           width: 150px;
           background-color: lightgoldenrodyellow;
           margin-left: -100%;       /*负边距的作用就是让左边div盖在中间div上面*/
       }
       .right{
           float: left;
           width: 200px;
           background-color: lightgray;
           margin-left: -200px;    /*让右边的div覆盖在中间的div右边*/
       }

• .center .left .right 设置 float：left
• .center 宽度设为100%后 ，.left .right 就会被挤到下一行
  
• .center内的文字.center-content 设置margin 预留出.left .right的宽度
• .left   margin-left:-100%  目的是为了让其覆盖在.center的左边
• .right  margin:-.right的宽度  目的是为了让其覆盖在.center的右边

本文为对http://www.cnblogs.com/pwei/p/css-layout.html 的理解