横向百分比布局分析
2021-01-18 15:37:37 0 举报AI智能生成
登录查看完整内容
类似栅格布局的布局方案，百分比占比宽度与固定宽度共存的方案设计
作者其他创作
大纲/内容
新增div
已有的div均为固定宽
无空余宽度
div均分
外扩父组件一个div的宽度
div不均分
外扩父组件固定宽度200px
有空余宽度
1、新增的div宽度等于单个div的宽度2、新增div设置为固定宽
空余宽度小于单个div宽度，则外扩
空余宽度大于单个div宽度，不内缩
1、空余宽度全部赋给新增的div2、新增div设置为固定宽
空余宽度小于200px，则外扩
空余宽度大于200px，不内缩
已有的div均为百分比
新增的div和其它div重新均分总宽度，不考虑最小宽度
考虑最小宽度，最大百分比div数量为20
新增的div与最后一个div均分宽度，加那个后面就均分哪一个，不考虑最小宽度
假定新增一个同百分比div
div总百分占比 > 100%
1、不考虑最小宽度或者空余宽度占比 >= 5%2、新增百分比div占满空余宽度3、百分比为（100% - 当前div总百分比）
考虑最小宽度且空余宽度占比小于5%
不足的部分由其它div给出
禁止新增div
div总百分占比 <= 100%
新增一个同百分比div
1、不考虑最小宽度或者空余宽度 >= 5%2、新增百分比div占满空余宽度3、百分比为（100% - 当前div总百分比）
固定宽百分比均存在
百分比div均分
百分比div不均分
新增一个div，其宽度为每个百分比div50%的宽度和。
若空余宽度百分比大于5%
1、新增百分比div占满空余宽度2、百分比为（100% - 当前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%
先向前找再向后找，直到找一个百分比 >= 10%的div
找到让新增div与其均分宽度
未找到，禁止新增
空余宽度 < 5%
无百分比div
固定宽div均分
空余宽度 < 单个div宽度，则外扩以达到一个div的宽度
空余宽度 >= 单个div宽度，新增一个固定宽宽度的div
固定宽div不均分
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的宽度
高度调整
问题记录
设置范围内宽度
设置宽度小于5%或大于100%后，无法实现让输入框内的内容回到输入前的状态
0 条评论
回复 删除
下一页
