居中的固定宽度div填充空间

Question

我想用三个<div>创建一个布局，其中第二个（中间）div具有固定的宽度（例如300px）。 我的另外两个<div>应该相等地填充父元素的其余部分。

我想用左右<div>的某种百分比来解决它，因此它是水平可缩放的。

<div>
    <div class="rest"></div>
    <div class="center"></div>
    <div class="rest"></div>
</div>

Answer 1

您可以将其他两个<div>的width属性设置为calc(50% - 150px); 。

div.rest {
    width: calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: -o-calc(50% - 150px);
    width: -moz-calc(50% - 150px);
}

请参阅JSFiddle上的示例 。