并列的两个盒子，一个有固定宽度，如何让另一个占满（自适应）剩余宽度

方法一:  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>