一、通過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;
 

• 要先渲染左右，然後渲染中間

二、通過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的右邊