IE 计算宽度问题答案

【问题标题】：IE calc width issueIE 计算宽度问题
【发布时间】：2016-12-01 17:46:27
【问题描述】：

这是一个小提琴：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 那样完全对齐。右边比左边多一点。

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

【问题讨论】：

标签： css internet-explorer layout microsoft-edge calc

【解决方案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;
}

【讨论】：