左边固定，右边自适应的两列布局，右面的 DOM 顺序在左边前面 实现

我的第一篇文章，too yang to smpo ，就写个简单的吧

<div class='container'>

   <div class='right'></div>

  <div class='left'></div>

</div>

两种实现思路：

1 、flex布局

参考文献：flex布局

.container  {

   display:flex;

   flex-direction:row-reverse;

}

.left:{

   width:200px;

   height:500px;

   background-color:'red'

}

.right:{

   flex:1,

   height:500px;

   background-color:'blue'

}

2. absolute

话不多少，直接上代码，调试通过；

       .container {

            position: relative; // 这句一定要，定位以祖宗中第一个非static为准进行绝对定位

        }
        .left {
            width: 200px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
            background-color:red;
        }
        .right {
            padding-left: 200px;
            width: 100%;
            height: 300px;
            background:blue
        }

看效果：

over！