<dl>
  <dt>表格两列布局,左边分类右边内容,一列固定宽度,一列自适应宽度,高度自动平行</dt>
  <dd class="box-1">
    <table>
      <tr>
        <td class="left">分类列表区域</td>
        <td class="right">主要内容区域<p>这是p标签的内容</p></td>
      </tr>
    </table>
  </dd>
  <dt>表格两列布局,左边内容右边分类,一列固定宽度,一列自适应宽度,高度自动平行</dt>
  <dd class="box-1">
    <table>
      <tr>
        <td class="right">右边主要内容区域<p>这是p标签的内容</p></td>
        <td class="left">左边列表区域</td>
      </tr>
    </table>
  </dd>
  <dt>表格两列布局,左边内容右边分类,按照宽度的百分比自适应</dt>
  <dd class="box-3">
    <table>
      <tr>
        <td class="left">左边列表区域</td>
        <td class="right">右边主要内容区域<p>这是p标签的内容</p></td>
      </tr>
    </table>
  </dd>
</dl>
dl{
  padding: 0;
  margin: 10px;
  dt{
    margin-top: 10px;
    font-size: 20px;
    color: #fff;
    background-color: #00c;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
  }
  dd{
    border: 1px solid #ccc;
    margin: 0;
    height: 300px;
    table{
      width: 100%;
      height: 100%;
      border-collapse: collapse;
      border-spacing:0;
      td{
        vertical-align: top;
        padding: 20px;
      }
    }
  }
  .left{background-color: pink;}
  .right{background-color: skyblue;}
}
.box-1{
  .left{
    width: 200px;
  }
}
.box-3{
  .left{
    width: 20%;
  }
  .right{
    width: 80%;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.