一、左右結構 左邊固定，右邊自適應

1. 左邊左浮動，右邊加個overflow:hidden;

   #lt{ float: left;width:200px; background: #ff0;}

   #rt{ overflow: hidden; background: #f0f;}

2. 左邊左浮動，右邊加個margin-left;

   #lt{ float: left; width:200px; background: #ff0;}

   #rt{ margin-left: 200px; background: #f0f;}

3. 左邊絕對定位，右邊加個margin-left;

   #lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}

   #rt{ margin
 
-left: 200px; background: #f0f;}

4. 左右兩邊絕對定位，右邊加個width,top,left,right

 #lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}

 #rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}

二、左右結構 右邊固定，左邊自適應的布局

1. 左邊左浮動，margin-left負值,右邊右浮動;

#lt{float:left; width:100%;background: #00f;margin-right: -200px;}
#rt{
 
float: right; width: 200px;background: #ff0;}

2. 右邊絕對定位，左邊margin-right;

   #lt{margin-right:200px; background: #00f;}

   #rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}

3. 左右兩邊絕對定位，左邊加個width,top,left,right

   #lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}

   #rt{ position: absolute; top:
 
0; left:200px; width:200px; background: #ff0;}

三、上下結構自適應

 .header,.footer{
      width: 100%;
      height: 100px;
      line-height: 100px;
      background-color: red;
 }
.content{
       width: 100%;
        position: absolute;
         top: 100px;
         bottom:100px;
          background-color: yellow;
}
.footer{
    position: absolute;
    bottom: 0px;
}

    <div class="header">頭部</div>
    <div class="content">內容</div>
    <div class="footer">底部</div>            

自適應布局 左右結構、上下結構