左边固定,右边自适应的两列布局,右面的 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!





猜你喜欢

转载自blog.csdn.net/u012356812/article/details/79994270