html - 从 % 中减去 px 的 CSS calc() 将 px 值解释为 %

Question

我在一个带有 1px 边框的容器中有两个 div。我希望每个 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;
}