是否可以使用CSS calc（）获得负值？

假设我们有一个在视口中居中的容器

.centered{margin: 0 auto; width:960px;}

。。。在这个容器中，我还有一个需要100%视口宽度的容器。我可以把利润设置为

.widest{margin: 0 -480px}

。。。例如问题是，该值不是-480px，而是视口宽度（960px）-即.centered width/2。。。使用calc（）非常简单，只是我需要一个负值的结果

.widest{
  margin: 0 calc( (100vw - 960px) / 2 );
}

我试着从0中减去很多得到一个负值，但没有成功

我不想使用JS，我只在Webkit中有问题——虽然不是calc（），但我的问题是，如果我通过执行以下操作将其破解为提交

.widest{
  margin: 0 -100%;
}

。。。我的页面在Chrome/Safari中水平滚动

---

你的想法？

是的，在某种程度上，这是可能的。关键部分是将元素的宽度设置为

100vw

，然后将其偏移视口宽度的负一半加上居中元素宽度的一半，例如使用

calc（-50vw+200px）

：

给定HTML

<div id='center'>center
    <div id='full'>full width</div>
</div>

---

编辑：一个比以前更简单的技巧：

calc（0px-something）

-有一个单位-有效，而

calc（0-something）

无效。看

这些“把戏”奏效了：

其中

0-有些东西

没有（至少在您的示例中）

---

我有另一个可能的解决方案。你可以偏离-2，所以你会得到一个否定的结果

.widest{
  margin-left: calc( (100vw - 960px) / -2 );
}

---

您可以尝试下一个解决方案

.some-class {
   margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}

---

如果布局如此简单，那就行了，我可能会解决这个问题，但是需要成为页面上“条带”的容器并不是到处都有相同的高度（尽管在使用位置高度是固定的）-我还必须将边距/填充设置到下一个元素的顶部，以防止它被#full…覆盖。。。另外：我真的很想知道是否有可能从calc（）中得到一个负值。我喜欢这两种方法，但这一种感觉不那么粗糙。。。我也觉得自己没有弄明白这件事有点傻。Thanks@sw4这是一个很好的解决方案。但是，我不知道如何使其适用于响应性

流体

-ish布局，其中

#中心

没有静态宽度，而是

最大宽度

，如@afkatja如果我正确解释了您的观点，本文包含流体中心所需的解决方案<代码>.full width{width:100vw；position:relative；left:50%；right:50%；margin left:-50vw；margin right:-50vw；}

计算（-1*某物）

太神奇了！您也可以进行计算（无论什么/-1）

.widest{
  margin-left: calc( (100vw - 960px) / -2 );
}

.some-class {
   margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}