多语言展示
当前在线:429今日阅读:126今日分享:42

php,html动态余数补全法div,li盒子,精确补全

我们在排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

理解流程很容易,主要获取最后一行空位进行补位

推荐信息