css - IE计算宽度问题

Question

这是一个 fiddle :https://jsfiddle.net/ftqft005/1/

基本上，我希望每个红色的“东西”框并排对齐，两个排成一排，左右间距完全相等。所以，“左边的东西”在左边，“右边的东西”在右边。我知道如果我将 .product-link 的宽度从 -7.5px 更改为 -15px，它们会并排放置，但是这两个框不会在中心完全对齐。

所以基本上，如果我改变这个:

.product-link {
float: left;
background-color: red;
width: calc(99.99% * 1/2 - 7.5px);
width: calc(99.99% * 1/2 - 0.46875rem);
}

为此:

.product-link {
float: left;
background-color: red;
width: calc(99.99% * 1/2 - 15px);
width: calc(99.99% * 1/2 - 0.9375rem);
}

它有点工作，但它并不像在网站上的 Chrome 和 FireFox 中那样完美对齐。右边的空间比左边多一点。

我不确定为什么它甚至不能在 fiddle 中工作，因为相同的代码在 Chrome 和 FireFox 中对我有用，但在 IE 和 Edge 中会中断。

Answer 1

我想我明白了:https://jsfiddle.net/ftqft005/4/

基本上，我试图模拟这个插件:https://github.com/peterramsing/lost

这是我模仿的这个人的代码。它应该提供对称的三项网格布局。不过，我不确定是否需要清除。

div {
  width: calc(99.9% * 1/3 - (30px - 30px * 1/3));
}
div:nth-child(1n) {
  float: left;
  margin-right: 30px;
  clear: none;
}
div:last-child {
  margin-right: 0;
}
div:nth-child(3n) {
  margin-right: 0;
  float: right;
}
div:nth-child(3n + 1) {
  clear: both;
}