两列布局一列固定宽度一列自适应宽度实现

1.使用 margin + float 实现

HTML：

<div class="normal">
    <div class="normal-right"></div>
    <div class="normal-left"></div>
</div>

CSS：

.normal-right {
    float: right;
    width: 100px;
    height: 300px;
    background-color: blue;
}
.normal-left {
    margin-right: 100px;
    height: 300px;
    background-color: yellow;
}

使用该种方法，浮动在右边的div必须写在左边div之前

2.使用 table + table-cell 实现

HTML：

<div class="table">
    <div class="table-left"></div>
    <div class="table-right"></div>
</div>

CSS：

.table {
    display: table;
    width: 100%;
    margin-top: 50px;
}
.table-left {
    display: table-cell;
    height: 300px;
    background-color: yellow;
}
.table-right {
    display: table-cell;
    width: 100px;
    height: 300px;
    background-color: blue;
}

diplay: table 在IE上仅支持IE 8及以上版本

3.使用 flex 布局实现

HTML：

<div class="flex">
    <div class="flex-left"></div>
    <div class="flex-right"></div>
</div>

CSS：

.flex {
    display: flex;
    margin-top: 50px;
}
.flex-left {
    width: 100%;
    background-color: blue;
    flex-shrink: 1;
    height: 300px;
}
.flex-right {
    width: 100px;
    background-color: yellow;
    flex-shrink: 0;
    height: 300px;
}

flex 布局仅支持 IE 10+、Chrome 21+、Firefox 22+、Safari 6.1+、Opera 12.1+