响应边界

Question

我创建了一个JavaScript函数，它捕获元素的宽度，并将该度量的百分比分配给元素的border-width样式。一切正常，但是当我将窗口放大到某一点以外时，最后一个元素会下降到下一行，好像上面没有足够的空间。我正在使用box-sizing：border-box和vw用于我的测量，一切都加起来为100vw所以我无法弄清楚为什么最后一个元素下降到下一行。我在CodePen之外测试了这段代码，所有元素都停留在一行，所以它可能只是一个CodePen问题。我只是好奇我是否有遗漏的东西。

以下是代码的链接： http://codepen.io/CASEYJAYMARTIN/pen/GrEaI

Answer 1

我在本地设置了你的例子，我遇到了你描述的问题，即最后一个框落到了下一行。我认为我的滚动条是罪魁祸首。

html {
  overflow-y: hidden;
}

我藏了它，现在所有的盒子都在一行上。

此外，您可能想要放置borderWidth。

borderWidth = Math.floor(squareWidth * 0.1);

另外，不要忘记支持Firefox。

.box, .square {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}