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:;
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 分割面板效果(一)基本原理的更多相关文章
- iview 分割面板效果(二)
源码地址:https://gitee.com/yolanda624/coffer/tree/master/src/components/a-split-panel
- 原生JavaScript 全特效微博发布面板效果实现
javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...
- 高级组件——分割面板JSplitPane
分割面板:JSplitPane(方向),默认水平分割.JSplitPane.HORIZONTAL_SPLIT,JSplitPane.VERTICAL_SPLITJSplitPane(方向,boolea ...
- VUE中实现iview的图标效果时遇到的一个问题
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...
- js进阶 13-7 如何实现滑动面板效果
js进阶 13-7 如何实现滑动面板效果 一.总结 一句话总结:就是普通的jquery动画中的滑动效果.$('#content').slideToggle().滑动效果的实质是通过调整高度. 1.滑动 ...
- Java分割面板和选项卡面板的应用
1.分割面板 JSplitPane类的常用构造方法 构造方法 说明 JSplitPane() 创建一个默认的分割面板.默认情况下为在水平方向上分割,重绘方式为只在调整分隔条位置完成时重绘 JSplit ...
- MUI-折叠面板效果accordion
在做开发的过程中我们经经常使用到折叠面板. 那我们来看下折叠面板到底是怎么使用. 废话不多说. 代码粘下来: <!DOCTYPE html> <html> <head&g ...
- jquery实现通用结构折叠面板效果
效果截图: 说明:可以任意添加多个类似结构样式,点击标题栏图片对应隐藏.显示. jquery代码: 思路一:基本方法 <script src="http://apps.bdimg.co ...
- 【javaFX学习】(二) 面板手册--1
找了好几个资料,没找到自己想要的,自己写个列表吧,方便以后用的时候挑选,边学边记.以学习笔记为主,所以会写的会偏个人记忆性.非教程,有什么问题一起讨论啊. 各个不同的控件放入不同的面板中有不同的效果, ...
随机推荐
- vue,一路走来(3)--数据交互vue-resource
所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...
- linux shell 管道命令(pipe)使用及与shell重定向区别
管道命令操作符是:”|”,它仅能处理经由前面一个指令传出的正确输出信息,也就是 standard output 的信息,对于 stdandarderror 信息没有直接处理能力.然后,传递给下一个命令 ...
- Java中的String、StringBuffer、StringBuilder区别以及Java之StringUtils的用法
1.String.StringBuffer.StringBuilder的区别 String是Java中基础类型,是immutable类(不可变)的典型实现,利用string进行拼接是会产生过多无用对象 ...
- 编写mapreduce的程序的套路
https://blog.csdn.net/qq_42881421/article/details/83543926 给出下面6个经典案例: http://www.cnblogs.com/xia520 ...
- QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库
解决方法: 终端命令:sudo apt-get install libqt4-dev sudo apt-get install libgstreamer0.10-dev sudo apt-get in ...
- 人生苦短_我用Python_openpyxl库读取Excel文件数据_008
上图为读取的目标文件--------------------------------------------------------------------------------- # coding ...
- 【leetcode】75. Sort Colors
题目如下: 解题思路:我的解题思路是遍历数组,遇到0删除该元素并插入到数组头部,遇到1则不处理,遇到2删除该元素并插入到数组尾部. 代码如下: class Solution(object): def ...
- 百度小程序-图片画廊-使用previewImage方法实现
.swan <!-- 轮播图 S--> <view class="swiper-box"> <swiper style='height:{{swipe ...
- 别人的双11 & 程序员的双11~
双11,致敬所有的程序员欧巴! 愿代码的世界,只有爱,没有伤害!! 点此参加阿里云双十一拼团活动:https://m.aliyun.com/act/team1111/ 阅读原文
- java 节点流(字符流,字节流)和包装流(缓冲流,转换流)
结点流:直接对File类进行操作的文件流 package stream; import java.io.File; import java.io.FileNotFoundException; impo ...