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
找了好几个资料,没找到自己想要的,自己写个列表吧,方便以后用的时候挑选,边学边记.以学习笔记为主,所以会写的会偏个人记忆性.非教程,有什么问题一起讨论啊. 各个不同的控件放入不同的面板中有不同的效果, ...
随机推荐
- linux驱动启动顺序
首先,我们可以查看Linux内核编译完成后的System.map文件,在这个文件中我们可以看到macb(dm9161驱动模块)链接到了dm9000驱动之前,如下所示: c03b6d40 t __ini ...
- Sass-除法
Sass的乘法运算规则也适用于除法运算.不过除了除法运算还有一个特殊之处.众所周知“/”符号在css中已作为一种符号使用,因此在sass中做除法运算时,直接使用"/" 符号作为除号 ...
- Echarts 折线类型
1:Echarts2.0 这种皮肤下柱状图转折线图默认是平滑曲线 默认皮肤为硬折线: 如果需要在2.0的macarons皮肤下使用硬折线需显式设置以下属性: series: [ { ...
- bzoj3717 [PA2014]Pakowanie 贪心+状压DP
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=3717 题解 这道题大概也就只能算常规的状压 DP 吧,但是这个状态和转移的设计还是不是很好想. ...
- ThreadPoolExecutor扩展
import java.util.concurrent.*; /** * ThreadPoolExecutor扩展 */ public class ExtThreadPool { public sta ...
- Vue.js----date与时间戳的转换(unixTime)Moment.js让日期处理变得更简单
当前日期格式化 let curTime = moment().format('YYYY-MM-DD HH:mm:ss') console.log('当前日期时间curTime:' + curTime) ...
- cocos2D-X 线程注意事项
{ 在子线程种是无法创建纹理的,也就是精灵 }
- android智能手机如何查看APK包名
工具/原料 智能手机一部 USB线一根 方法/步骤 1 首先.使用USB线,将电脑和手机连起来.注意.手机的USB调试默认需要打开,如下图所示. 2 然后启动电脑端的cmd应用,进入dos界面 ...
- 08-图7 公路村村通(30 分)Prim
现有村落间道路的统计数据表中,列出了有可能建设成标准公路的若干条道路的成本,求使每个村落都有公路连通所需要的最低成本. 输入格式: 输入数据包括城镇数目正整数N(≤1000)和候选道路数目M(≤3N) ...
- filebeat配置详解
从input读取事件源,经过相应解析和处理之后,从output输出到目标存储库(elasticsearch或其他).输入可以从Log.Syslog.Stdin.Redis.UDP.Docker.TCP ...