html - 使用居中固定宽度的 div 填充空间

Question

我想创建一个包含三个 <div> 的布局s，因此我的第二个(中间)div 具有固定宽度(例如 300px)。我的另外两个<div> s，应该同样填充父元素的其余部分。

我很乐意用左右的某种百分比来解决它 <div> s，所以它是水平可扩展的。

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

Answer 1

您可以设置 width另外两人的属性(property)<div> s 至 calc(50% - 150px); .

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

参见 this example on JSFiddle .