Question

这是一个小提琴：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中有所突破。

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;
}

IE calc宽度问题

1 个答案: