iview 分割面板效果（一）基本原理

方法一：

 基本點就是：利用“子絕父相（子元素相對於父元素進行定位）”，

　　　　　　左側的pane設置為left:0;right:a%,

　　　　　　則右側的設置為right:0;left:（100-a）%。

　　　　　　如果左右之間有操作條什么的，要記得減出去喲；總之就是width要湊成100%。

1  <div class="wrapper">
2       <div class="pane pane-left"></div>
3       <div class="pane pane-right"></div>
4   </div>

<style lang="less" scoped>
.wrapper{
  position: relative;
  width: 500px;
  height: 500px;
  margin-left: 20px;
  .pane{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    &-left{
      background: pink;
      right: 40%;
    }
    &-right{
      background: yellowgreen;
      left: 60%;
    }
  }
}
</style>

                               

 

方法二：

與方法一大同小異。

左側設置寬度 width：a%;

右側設置的left等於左側寬度，即a%;

<style lang="less" scoped>
.wrapper{
  position: relative;
  width: 500px;
  height: 500px;
  margin-left: 20px;
  .pane{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    &-left{
      background: rgb(233, 158, 18);
      // right: 40%; // 方法一
      width: 60%;
    }
    &-right{
      background: rgb(13, 231, 220);
      // left: 60%; // 方法二
      left: 60%;
    }
  }
}
</style>