从％中减去px的CSS calc（）将px值解释为％

Question

我在容器中有两个div，边框为1px。我希望每个div按宽度占据容器的一半，所以我正在尝试使用CSS3的calc 用于从总宽度（50％）中减去预定像素值（2px，div的每一侧上的一条边界线）。但是，由于我无法弄清楚的原因，它会从百分比值中减去百分比值而不是此操作的像素：calc(50% - 2px);

以下是容器中div的相关样式：

.contained {
  border-width: 1px;
  width: calc(50% - 2px);
  display: inline-block;
}

Answer 1

正如CKH4建议的那样使用box-sizing: border-box。 box-sizing比calc得到更好的支持，而且它更整洁，也更灵活。

.contained {
    border-width: 1px;
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
}