码迷,mamicode.com
首页 > 其他好文 > 详细

iview 分割面板效果(一)基本原理

时间:2019-08-29 17:55:38      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:相对   tom   ane   app   pos   左右   ott   nbsp   ack   

方法一:

 基本点就是:利用“子绝父相(子元素相对于父元素进行定位)”,

      左侧的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>

         技术图片

iview 分割面板效果(一)基本原理

标签:相对   tom   ane   app   pos   左右   ott   nbsp   ack   

原文地址:https://www.cnblogs.com/ordinary-yolanda/p/11430865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!