一、左側定寬，右側自適應

1. 使用float和margin實現

html

<div class="left">左側定寬</div>
<div class="right">右側自適應</div>

css

  .left{
    background-color: red;
    float: left;
    width: 300px;
    height:300px;
  }
  .right{
    background-color: green;
    margin-left: 300px;
    height:300px;
  }

效果圖

2. 使用float+margin(fix)實現

html

<div class="left">左側定寬</div>
<div class="right-parent">
  <div class="right">
    利用float+margin(fix)實現
  </div>
</div>

css

  .left{
    background-color: red;
    float: left;
    width: 100px;
    height:300px;
  }
  .right-parent{
    float
 
: right;
    margin-left: -100px;
    width: 100%;
  }
  .right{
    background-color: green;
    margin-left:100px;
    height:300px;
  }

css多列布局