我们在排html页面,有时候遇到需要定义的宽度的框,里面五个div盒子为慢一行,要是不够的时候很难看,缺斤少两的感觉,那么怎么进行空位补全呢,这时候可以考虑余数补全了
工具/原料
1
余数补全
2
编辑器
方法/步骤
1
如图所示,那么途中的盒子差一个排满,被定义了宽度,怎么动态去用空盒子去补全呢。4补1,3补2......
2
页面盒子示意图,四个内容区域盒子,就有补全一个空盒子为慢,撑起了一整条才好看
3
循环内容,那么有三种可能,第一种是刚刚好够的,5、10、15、20这样的是刚刚好填满的,第二种是少于5的,还有就是大于5的
4
页面如图,刚刚好的就直接输出,不用形象补全,在下面的补全方法设置循环空盒子为0即可
5
如图所示,不是刚刚好的,小于5就用5-去内容盒子就剩下,需要补全的空盒子进行补全;大于5,就直接获取余数,就是最后一行的盒子个数,同上方法获取需要补全的空盒子进行补全
6
页面效果图,动态去掉内容区一个盒子,就可以自动补全一个空盒子。由原来的4补1变成3补2
注意事项
1
注意计算余数的个数方法
2
理解流程很容易,主要获取最后一行空位进行补位
上一篇:如何避免焦虑的情绪出现
下一篇:健康减肥方法