

首页  思维导图  详情



横向百分比布局分析

2021-01-18 15:37:37   0  举报





AI智能生成

类似栅格布局的布局方案，百分比占比宽度与固定宽度共存的方案设计

需求分析

方案设计

模版推荐

作者其他创作

大纲/内容

新增div

已有的div均为固定宽

无空余宽度

div均分

外扩父组件一个div的宽度

div不均分

外扩父组件固定宽度200px

有空余宽度

div均分

1、新增的div宽度等于单个div的宽度 2、新增div设置为固定宽

空余宽度小于单个div宽度，则外扩

空余宽度大于单个div宽度，不内缩

div不均分

1、空余宽度全部赋给新增的div 2、新增div设置为固定宽

外扩父组件固定宽度200px

空余宽度小于单个div宽度，则外扩

空余宽度大于单个div宽度，不内缩

外扩父组件固定宽度200px

空余宽度小于200px，则外扩

空余宽度大于200px，不内缩

已有的div均为百分比

无空余宽度

div均分

新增的div和其它div重新均分总宽度，不考虑最小宽度

考虑最小宽度，最大百分比div数量为20

div不均分

新增的div与最后一个div均分宽度，加那个后面就均分哪一个，不考虑最小宽度

考虑最小宽度，新增的div与所找到的div均分宽度,找不到就禁止新增

有空余宽度

div均分

假定新增一个同百分比div

div总百分占比 > 100%

1、不考虑最小宽度或者空余宽度占比 >= 5% 2、新增百分比div占满空余宽度 3、百分比为（100% - 当前div总百分比）

考虑最小宽度且空余宽度占比小于5%

不足的部分由其它div给出

禁止新增div

div总百分占比 <= 100%

新增一个同百分比div

div不均分

1、不考虑最小宽度或者空余宽度 >= 5% 2、新增百分比div占满空余宽度 3、百分比为（100% - 当前div总百分比）

考虑最小宽度且空余宽度 < 5%, 增加的div为最小百分比5%

不足的部分由其它div给出

禁止新增div

固定宽百分比均存在

无空余宽度

百分比div均分

新增的div和其它div重新均分总宽度，不考虑最小宽度

考虑最小宽度，最大百分比div数量为20

百分比div不均分

考虑最小宽度，新增的div与所找到的div均分宽度,找不到就禁止新增

新增一个div，其宽度为每个百分比div 50%的宽度和。

有空余宽度

百分比div均分

假定新增一个同百分比div

div总百分占比 > 100%

若空余宽度百分比大于5%

1、新增百分比div占满空余宽度 2、百分比为（100% - 当前div总百分比）

考虑最小宽度且空余宽度占比小于5%

不足的部分由其它div给出

禁止新增div

div总百分占比 <= 100%

新增一个同百分比div

百分比div不均分

1、不考虑最小宽度或者空余宽度 >= 5% 2、新增百分比div占满空余宽度 3、百分比为（100% - 当前div总百分比）

考虑最小宽度且空余宽度 < 5%, 增加的div为最小百分比5%

不足的部分由其它div给出

禁止新增div

删除div

已有的div均为固定宽

无空余宽度

无论是否均分

父组件内缩所删除的div宽度

父组件宽度不变，出现空余宽度

有空余宽度

无论是否均分

父组件内缩所删除的div宽度

父组件宽度不变，增大空余宽度

已有的div均为百分比

无空余宽度

div均分

剩余div平分宽度，不出现空余宽度

div不均分

删除的div会成为空余宽度

有空余宽度

无论div是否均分

删除后的div宽度占比存放在空余宽度中

固定宽百分比均存在

无空余宽度

删除固定宽div

百分比div按比例均分所删div宽度

删除百分比div

div均分

剩余div平分宽度，不出现空余宽度

div不均分

出现空余宽度，宽度为删除的div

删除最后一个百分比div消除空余宽度

删除最后一个百分比div保留空余宽度

有空余宽度

删除固定宽div

百分比div按比例均分所删div宽度

删除百分比div

删除后的div宽度占比存放在空余宽度中

删除最后一个百分比div消除空余宽度

删除最后一个百分比div保留空余宽度

新增流程

遍历所有div

有百分比div

百分比div均分

无空余宽度

div数量  <= 20

百分比div均分宽度

div数量 > 20

禁止增加

有空余宽度

空余 >= 一个div的百分占比

新增一个百分比div 

空余 < 一个div的百分占比

空余宽度 >= 5%

新增div占满空余宽度

空余宽度 < 5%

禁止新增div

百分比div不均分

无空余宽度

先向前找再向后找，直到找一个百分比 >= 10%的div

找到让新增div与其均分宽度

未找到，禁止新增

有空余宽度

空余宽度 >= 5%

新增div占满空余宽度

空余宽度  < 5%

禁止新增div

无百分比div

固定宽div均分

有空余宽度

1、新增的div宽度等于单个div的宽度 2、新增div设置为固定宽

空余宽度 < 单个div宽度，则外扩以达到一个div的宽度

空余宽度 >= 单个div宽度，新增一个固定宽宽度的div

无空余宽度

外扩父组件一个div的宽度

固定宽div不均分

有空余宽度

外扩父组件固定宽度200px

空余宽度小于200px，则外扩

10 空余宽度大于200px，不内缩

无空余宽度

11  外扩父组件固定宽度200px

div宽度调整

调整固定宽

最小宽度为100px

存在百分比div

不存在百分比div

有空余宽度

增加

空余宽度 >= 增加的宽度

父组件不变，缩小空余宽度

空余宽度 < 增加的宽度

不允许增加宽度，给出警告

外扩父组件宽度，以达到增加后的宽度

减小

父组件宽度不变，增大空余宽度

无空余宽度

增加

外扩父组件宽度

减小

父组件宽度不变，出现空余宽度

宽度小于100px

调整失败

调整百分比宽

增加

增加后总百分比 <= 100%

成功更改

增加后总百分比 > 100%

无论是否空余宽度

先右后左各一个位置查找可调整的百分比div（>5%）， 满足调整条件可调整，否则调整失败

禁止调整

单个增到100%以上不支持

减小

最小宽度至少5%

固定宽百分比转换

百分比转固定宽

百分比实际宽度 >= 100px

 剩余百分比div宽度不变，重新计算各自的百分占比

剩余百分比div百分占比不变，实际宽度变化

百分比实际宽度 < 100px

转换失败

固定宽转百分比

不考虑最小宽度

所有百分比div重新计算各自的占比

考虑最小宽度5%

百分比div数量不超过20

计算完成转变后的百分占比

存在百分占比不足5%的div

对于每一个此类div

不足的部分由其它大于5%的div分摊

转换失败

不存在百分占比不足5%的div

转换成功

百分比div数量超过20

禁止转换

父组件宽度调整

宽度调整

增加

全部为固定宽div

1、固定宽div宽度不变 2、没有空余宽度，则出现空余宽度 3、有空余宽度，则增大空余宽度

全部为百分比div

根据增宽后的父组件宽度和每个div的 百分占比重新渲染每个div的宽度

百分比div固定宽div均有

1、固定宽div均不变 2、百分比div根据各自的占比重新渲染宽度

减少

全部为固定宽div

调整后div宽度 >= 总固定宽宽度

成功调整

调整后div宽度 < 总固定宽宽度

调整失败，给出警告

全部为百分比div

根据减少后的父组件宽度和每个div的 百分占比重新渲染每个div的宽度

百分比div固定宽div均有

调整后div宽度 >= 总固定宽宽度

1、固定宽div均不变 2、百分比div根据各自的占比重新渲染宽度

调整后div宽度 < 总固定宽宽度

调整失败，给出警告

高度调整

问题记录

设置范围内宽度

设置宽度小于5%或大于100%后，无法实现让输入框内的内容回到输入前的状态 

 Collect

Get Started

3.0 众筹百分比计算方案

 Collect

Get Started

柱状图、百分比

 Collect

Get Started

百分比、占比图、比例图

 Collect

Get Started

百分比堆积折线图





0 条评论

下一页