190501.md

两列布局：一列固定宽，一列自适应

兼容IE9及以下浏览器

负 margin 写法

1. html

<div>
  <div class="aside">
    <p>左侧布局</p>
    <p>左侧布局</p>
    <p>左侧布局</p>
    <p>左侧布局</p>
  </div>
  <div class="main">
    主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容
  </div>
</div>

2. css

.wrap {
    width: 100%;
    background: #f00;
    overflow: hidden; // 创建BFC，防止浮动撑不起高度
}
.wrap .aside {
    width: 300px;
    background: #0ff;
    float: left; 
}
.wrap .main {
    background: #00f;
    margin-right: -300px;
    overflow: hidden;
}

flex写法

.wrap {
    width: 100%;
    display: flex;
    flex-decoration: row;
    justify-content: flex-start;
}
.wrap .aside {
    width: 300px;
}
.wrap .main {
    flex: 1;
}