最终（更新）：

Question

我尝试制作一个非常动态的angular2组件，用于打印用户列表。问题是，我不是最好的数学。现在我试图理解我的数学计算有什么问题。

我已经设置了一支笔来证明这个问题：

http://codepen.io/BamiGorengo/pen/rjWmao

我给每个li一个填充，第一行和最后一行重置为填充外部0。所以我需要重新计算丢失的填充，我删除。每个元素都具有完全相同的大小并使用100％的内容宽度。

Answer 1

这是两个解决方案

最终（更新）：

这是我手段上的“hacky”解决方案，但它可以满足您的需求：

我们需要使用calc，因为我们将混合使用％和px。

首先，我们需要从padding更改为margin，这样当我们删除最后一个项目和第一个项目的间距时，内部宽度将保持不变。

现在我们需要在宽度计算中包含边距，但它不像

那么简单

$width - $spacing * 2

因为我们正在删除边距。所以这是公式：

width: calc(#{$userWidth} - #{(($spaceBetweenUserList * 2) - ($spaceBetweenUserList/4))});

这适用于8个元素但不适用于所有元素，因为我们需要考虑有多少元素，所以最终（复杂）公式：

width: calc(#{$userWidth} - #{((($userEachRow * $spaceBetweenUserList * 2)) - ($spaceBetweenUserList * 2))/$userEachRow});

Final working demo

花车（原创）

您使用浮点数的唯一错误是li元素的实际宽度。你写了这个：

width: calc(#{$userWidth} + #{$spaceBetweenUserList / 2});

您不需要$spaceBetweenUserList因为它是填充而 CSS Box模型表示填充是“在框内”。

所以实际修复只是使用宽度width: $userWidth;

最后，您实现了端到端效果添加margin: 0 (-1) * $spaceBetweenUserList。这将左右负，拉动末端的现有填充。

Flexbox的

如果你问我更优雅的解决方案，因为你“不”需要断点等等。

也更简单

ul.flexbox {
  margin: 0 (-1) * $spaceBetweenUserList;
  display: flex;
  flex-wrap: wrap;
  li {
    flex: 0 0 $userWidth;
    padding: 0 $spaceBetweenUserList;
  }
}

浏览器支持非常好，超过97％的前缀。

演示

以下是这两个演示 Codepen.io

Scss中复杂的宽度计算

1 个答案:

最终（更新）：

花车（原创）

Flexbox的

演示