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

最新推荐文章于 2024-08-23 09:58:33 发布

dddx15352093596

最新推荐文章于 2024-08-23 09:58:33 发布

阅读量1k

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/ordinary-yolanda/p/11430865.html

版权

本文介绍了两种方法实现iView框架中的分割面板效果。主要依赖于CSS布局技巧，通过'子绝父相'定位原理，调整左右pane的left和right属性，确保总宽度为100%，适用于动态调整面板大小的场景。

摘要由CSDN通过智能技术生成

方法一：

基本点就是：利用“子绝父相（子元素相对于父元素进行定位）”，

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