如何计算保证金后的div宽度？

Question

我正在开发一个快速响应的网站，我遇到了一个问题。我有一个宽度为100％的div容器，在里面我有2个div的侧边栏和内容。边栏设置为40％宽，内容设置为60％。

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

现在，％的内容宽度是什么，或者是否有任何计算公式？

以下是我要做的事情 - JSFIDDLE

Answer 1

您可以更改CSS以使用calc作为宽度值，您想要减去所需px中差距的1/2，然后将相同的金额添加到相关的边距：

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

Answer 2

是的，有一种方法可以使用calc函数实现此目的。

.content {
    margin-left:calc(40% + 25px);
}

但是，缺点是，calc不是跨浏览器。它不适用于IE。

See updated fiddle here.