javascript - 计算百分比网格布局单元格宽度

Question

我正在尝试生成响应式网格布局，但我不是数学天才……不……真的……我不是。

这就是我想要做的。

1. 获取包含网格元素的元素的宽度。
2. 所有网格元素都有 20px 的右边距和底部边距
3. 根据根元素的宽度，单元格的数量会发生变化。如果宽度大于 1200 像素，则假设为 5 个单元格。
4. 每个 :nth(x)(一行中的最后一个元素)将 margin-right 设置为 0
5. 计算单元格的百分比宽度。

如果最后一个元素将保留 margin-right 一切都会起作用，但在这种情况下，margin 必须消失。

这就是我能用我的数学做的一切....^-^

var marginRight = 20, viewportWidth = 1200, numcells = 5;
var substract =  marginRight / ( viewportWidth / 100 );
width = 100 / numcells - substract;

如前所述。如果最后一个单元格保持边距，这将起作用。但他们没有，我不知道如何解决。一些stackoverflowmonks可以带来智慧吗？那太好了。谢谢。

Answer 1

这行得通。是否有更优雅的解决方案？

viewportWidth = 1200, numcells = 5, marginRight = 20;
one   = viewportWidth-(numcells-1)*marginRight;
two   = (one / gridNum);
three =  two / (  viewportWidth / 100  );