實現左邊固定寬度右邊自適應佈局

       第一種

       #box{width: 100%;background: red;overflow:hidden;}
       #lef{float:left;width: 300px;height: 300px;background: blue;}

       #rig{margin-left: 310px;background: pink;height: 500px;}

       第二種
        #box{width: 100%;background: red;overflow:hidden;position: relative;}
        #lef{position:absolute;top: 0;left: 0; width: 300px;height: 300px;background: blue;}
        #rig{margin-left: 310px;background: pink;height: 500px;}

       第三種 
       #box{width: 100%;background: red;overflow:hidden;}
       #lef{float:left;width: 300px;height: 300px;background: blue;}
       #rig{overflow: hidden; background: pink;height: 500px;}

       第四種      calc()能讓你給元素的做計算。
       #box{width: 100%;background: red;overflow:hidden;} 
       #lef{width: 300px;float: left; height: 300px;background: blue;}  
       #rig{float: left;width: calc(100% - 300px);height:400px;background: pink;}

       

      使用div標籤

      <div id="box">
          <div id="lef"></div>
          <div id="rig"></div>
      </div>