方法一:  flex佈局

      本人將flex佈局放在第一位，是個人推薦， 沒有浮動，讓頁面佈局更為穩定。

    <style>
	 #d1{
		  width:100%;
		  display:flex; /*flex佈局*/
		}
        .dz{
        	background: red;
        	width:200px;
        	height: 200px;
        } 
       .dx{
           flex:1;     /*flex:1*/
           height: 200px;
           background: yellow;  
       } 
	</style>

    <div id="d1">
	     <div class="dz"></div>
	     <div class="dx"></div>
	</div>
 

方法二：css的計算函式

<style>
       .wrap{
            width:1000px;
            height:400px;
            border:1px solid red;
        }
        .left{
            width:200px;
            height:100%;
            background:gray;
            float:left;
        }
        .right{
            height:100%;
            background:green;
            float:right;
            /*計算函式 calc()*/ 
            width:calc(100%-200px);
        }
	</style>          

	 <div class="wrap">
          <div class="left"></div>
          <div class="right"></div>
     </div>
 

方法三：外邊距法

   <style>
       .wrap{
            width:1000px;
            height:400px;
            border:1px solid red;
        }
        .left{
            float:left;
            width:200px;
            border:1px solid red;
            height:100%;
            background:gray;
        }
        .right{
            height:100%;
            border:1px solid blue;
            width:auto;
            background:green;
            margin-left:200px;  /*使用外邊距推開*/
        }
	</style> 

    <div class="wrap">
          <div class="left"></div>
          <div class="right"></div>
     </div>