要求：
- 左列定宽，右列自适应；
- 左右两列等高且自适应；
- 右列优先渲染；
对于第一点很好实现，实现的方法也不唯一。
对于实现两列等高，则需要实现最小高度的设置。如下：
min-height: 200px;
height: auto !important;
height: 200px;
对于实现右列先渲染，在HTML代码中将右列写前边，然后给左列margin-left属性一个适当值即可。
好啦～废话不多说了，接下来一起来动手实践吧。
首先，建立框架，加入两栏：
<div id="container">
<div id="right">我在右边，自适应布局</div> //写在左列前边，实现右列优先渲染。
<div id="left">我在左边，定宽</div>
</div>
#right{
width: 100%;
background-color:red;
}
#left{
background-color:green;
width: 200px;
}
#left, #right{
min-height: 200px;
height: auto !important;
height: 200px;
}
效果图如下：
第一步
接着将左列放上去
#right{
float:left;
}
#left{
float: left;
margin-left: -100%;
}
效果图如下：
第二步
我们看到右列的部分内容被左列覆盖掉了。
所以，接下来需要让被覆盖的内容显现出来
#container{
margin-left: 200px;
position: relative;
}
#left{
position: relative;
left: -200px;
}
这里的主要思想是，设置container容器的margin-left值为左列的宽度，在相对定位的情况下，把左列的left属性的值设为其宽度即可。
效果图如下：
第三步
好啦～到此为止所有的要求都已经实现了～（高度自适应未实现，可以参考如何实现多列等高布局？）
参考资料：
https://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width
