html - CSS - 3 个 div，1 个固定大小，其他填充空间

Question

我的网页上有 3 个 div，彼此水平相邻。中间一个是固定大小的。我想让其他人填满页面上的剩余空间。

我做了这个片段，它是我的问题的简化版本:

#left {
  background: red;
  float: left;
}
#middle {
  background: blue;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
#right {
  background: green;
  float: right;
}

<div id='right'>groen</div>
<div id='left'>rood</div>
<div id='middle'>fixed px blauw</div>

我不能使用百分比，因为中间的 div 有固定大小。

左右 div 的宽度应分别为 (100%-1170px)/2

有没有简单的方法让css填满多余的空间？或者，如果这不是一个选项，是否有办法以编程方式执行此操作？

Answer 1

演示 - http://jsfiddle.net/mpsrcmgg/1/

您可以为父级使用table布局display:table，为子级使用display:table-cell，但您需要更改html标记

.cont {
  display: table;
  width: 100%;
}
.cont div {
  display: table-cell;
}
#left {
  background: red;
}
#middle {
  background: blue;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
#right {
  background: green;
}

<div class="cont">
  <div id='right'>groen</div>
  <div id='middle'>fixed px blauw</div>
  <div id='left'>rood</div>
</div>