首页 > 软件开发 > HTML >

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

来源:互联网 2023-03-16 19:11:25 363

我们在排html页面,有时候遇到需要定义的宽度的框,里面五个div盒子为慢一行,要是不够的时候很难看,缺斤少两的感觉,那么怎么进行空位补全呢,这时候可以考虑余数补全了nBI办公区 - 实用经验教程分享!

php,html动态余数补全法div,li盒子,精确补全nBI办公区 - 实用经验教程分享!

工具/原料

  • 余数补全
  • 编辑器

方法/步骤

  • 1

    如图所示,那么途中的盒子差一个排满,被定义了宽度,怎么动态去用空盒子去补全呢。4补1,3补2......nBI办公区 - 实用经验教程分享!

    php,html动态余数补全法div,li盒子,精确补全nBI办公区 - 实用经验教程分享!

  • 2

    页面盒子示意图,四个内容区域盒子,就有补全一个空盒子为慢,撑起了一整条才好看nBI办公区 - 实用经验教程分享!

    php,html动态余数补全法div,li盒子,精确补全nBI办公区 - 实用经验教程分享!

  • 3

    循环内容,那么有三种可能,第一种是刚刚好够的,5、10、15、20这样的是刚刚好填满的,第二种是少于5的,还有就是大于5的nBI办公区 - 实用经验教程分享!

    php,html动态余数补全法div,li盒子,精确补全nBI办公区 - 实用经验教程分享!

  • 4

    页面如图,刚刚好的就直接输出,不用形象补全,在下面的补全方法设置循环空盒子为0即可nBI办公区 - 实用经验教程分享!

    php,html动态余数补全法div,li盒子,精确补全nBI办公区 - 实用经验教程分享!

  • 4此文章未经许可获取自百度经验
  • 5

    如图所示,不是刚刚好的,小于5就用5-去内容盒子就剩下,需要补全的空盒子进行补全;大于5,就直接获取余数,就是最后一行的盒子个数,同上方法获取需要补全的空盒子进行补全nBI办公区 - 实用经验教程分享!

    php,html动态余数补全法div,li盒子,精确补全nBI办公区 - 实用经验教程分享!

  • 6

    页面效果图,动态去掉内容区一个盒子,就可以自动补全一个空盒子。由原来的4补1变成3补2nBI办公区 - 实用经验教程分享!

    php,html动态余数补全法div,li盒子,精确补全nBI办公区 - 实用经验教程分享!

  • 注意事项

    • 注意计算余数的个数方法
    • 理解流程很容易,主要获取最后一行空位进行补位

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!nBI办公区 - 实用经验教程分享!


    标签: HTMLPHP编程语言

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码