css - 如何计算边距后的div宽度？

Question

我在一个响应式网站上工作时遇到了一个问题。我有一个宽度为 100% 的 div 容器，里面有 2 个 div 的侧边栏和内容。侧边栏设置为 40% 宽，内容设置为 60%。

现在，我想在它们之间留出 25px 的空间，为此我使用了 margin-left:25px;。

现在，以 % 为单位的内容宽度是多少，或者是否有任何公式可以计算？

这是我要做的 - JSFIDDLE

Answer 1

您可以更改您的 CSS 以使用 calc 作为宽度值，您想要减去 1/2 的间隙量(以 px 为单位)，然后添加与相关 margin 相同的数额:

Demo Fiddle

.container {
    background:#ccc;
}
.sidebar {
    width:calc(40% - 12.5px);
    margin-right:12.5px;
    background:red;
    height:50px;
    float:left;
}
.content {
    width:calc(60% - 12.5px);
    margin-left:12.5px;
    background:green;
    height:50px;
    float:left;
}