方法一:

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

      左侧的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:;
bottom:;
left:;
right:;
&-left{
background: rgb(233, 158, 18);
// right: 40%; // 方法一
width: 60%;
}
&-right{
background: rgb(13, 231, 220);
// left: 60%; // 方法二
left: 60%;
}
}
}
</style>

        

iview 分割面板效果(一)基本原理的更多相关文章

  1. iview 分割面板效果(二)

    源码地址:https://gitee.com/yolanda624/coffer/tree/master/src/components/a-split-panel

  2. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  3. 高级组件——分割面板JSplitPane

    分割面板:JSplitPane(方向),默认水平分割.JSplitPane.HORIZONTAL_SPLIT,JSplitPane.VERTICAL_SPLITJSplitPane(方向,boolea ...

  4. VUE中实现iview的图标效果时遇到的一个问题

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...

  5. js进阶 13-7 如何实现滑动面板效果

    js进阶 13-7 如何实现滑动面板效果 一.总结 一句话总结:就是普通的jquery动画中的滑动效果.$('#content').slideToggle().滑动效果的实质是通过调整高度. 1.滑动 ...

  6. Java分割面板和选项卡面板的应用

    1.分割面板 JSplitPane类的常用构造方法 构造方法 说明 JSplitPane() 创建一个默认的分割面板.默认情况下为在水平方向上分割,重绘方式为只在调整分隔条位置完成时重绘 JSplit ...

  7. MUI-折叠面板效果accordion

    在做开发的过程中我们经经常使用到折叠面板. 那我们来看下折叠面板到底是怎么使用. 废话不多说. 代码粘下来: <!DOCTYPE html> <html> <head&g ...

  8. jquery实现通用结构折叠面板效果

    效果截图: 说明:可以任意添加多个类似结构样式,点击标题栏图片对应隐藏.显示. jquery代码: 思路一:基本方法 <script src="http://apps.bdimg.co ...

  9. 【javaFX学习】(二) 面板手册--1

    找了好几个资料,没找到自己想要的,自己写个列表吧,方便以后用的时候挑选,边学边记.以学习笔记为主,所以会写的会偏个人记忆性.非教程,有什么问题一起讨论啊. 各个不同的控件放入不同的面板中有不同的效果, ...

随机推荐

  1. vue,一路走来(3)--数据交互vue-resource

    所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...

  2. linux shell 管道命令(pipe)使用及与shell重定向区别

    管道命令操作符是:”|”,它仅能处理经由前面一个指令传出的正确输出信息,也就是 standard output 的信息,对于 stdandarderror 信息没有直接处理能力.然后,传递给下一个命令 ...

  3. Java中的String、StringBuffer、StringBuilder区别以及Java之StringUtils的用法

    1.String.StringBuffer.StringBuilder的区别 String是Java中基础类型,是immutable类(不可变)的典型实现,利用string进行拼接是会产生过多无用对象 ...

  4. 编写mapreduce的程序的套路

    https://blog.csdn.net/qq_42881421/article/details/83543926 给出下面6个经典案例: http://www.cnblogs.com/xia520 ...

  5. QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库

    解决方法: 终端命令:sudo apt-get install libqt4-dev sudo apt-get install libgstreamer0.10-dev sudo apt-get in ...

  6. 人生苦短_我用Python_openpyxl库读取Excel文件数据_008

    上图为读取的目标文件--------------------------------------------------------------------------------- # coding ...

  7. 【leetcode】75. Sort Colors

    题目如下: 解题思路:我的解题思路是遍历数组,遇到0删除该元素并插入到数组头部,遇到1则不处理,遇到2删除该元素并插入到数组尾部. 代码如下: class Solution(object): def ...

  8. 百度小程序-图片画廊-使用previewImage方法实现

    .swan <!-- 轮播图 S--> <view class="swiper-box"> <swiper style='height:{{swipe ...

  9. 别人的双11 & 程序员的双11~

    双11,致敬所有的程序员欧巴! 愿代码的世界,只有爱,没有伤害!! ​ 点此参加阿里云双十一拼团活动:https://m.aliyun.com/act/team1111/ 阅读原文

  10. java 节点流(字符流,字节流)和包装流(缓冲流,转换流)

    结点流:直接对File类进行操作的文件流 package stream; import java.io.File; import java.io.FileNotFoundException; impo ...