我正在编写一个脚本,该脚本获取导航栏中的项目,并将除最后一行之外的每一行拉伸到菜单容器的宽度。该过程基本上是:
- 查找菜单容器宽度
- 遍历每个项目,添加.outerWidth(true)
到包含当前行宽的变量
- 当当前行宽变得大于或等于容器宽度时,运行一些测试
-.outerWidth(true)
从当前行宽减去并添加.innerWidth().
--如果行宽仍然大于容器宽度,则移动到下一行数组,并将当前项添加为行中的第一项,
--如果行宽等于或小于容器宽度,则添加item 作为当前行的最后一项,并移动到下一行数组。
创建行后,通过查找容器宽度和行宽度之间的差异并遵循以下公式来计算添加到每个元素的必要填充:
this.addedPadding = Math.floor( this.difference / ( this.items.length * 2) );
然后通过以下方式计算剩余空间:
this.leftovers = this.difference - (this.addedPadding * 2 * this.items.length);
然后继续遍历所有项目,添加添加的填充。然后取leftovers
,将其向下迭代 2,在第一个元素的每一侧添加 1px 的填充,然后是第二个、第三个,依此类推,直到leftovers
等于 1 或 0。如果等于 1,则padding-right
向行中的最后一项。
遍历每一行,并重复该过程。
现在,问题是,不同的浏览器呈现字体略有不同,所以数字并不总是完美地相加。我当前的解决方案是通过浏览器进行必要的调整来更改容器宽度,以便正确呈现行。这甚至没有一致的结果。例如,在我正在处理的网站上,在 Chrome 中,主页起初呈现不正确,但(至少在我的计算机上)如果您刷新,它会正确呈现。
无需根据浏览器和内容更改 containerWidth 的正确方法是什么?有办法吗?
有关问题的示例,请访问http://development.rjhallsted.com/login_system/browsing/projects/insidemt/