Html 流体的100%宽度；“自动宽度”；父母亲

我试图创建一个由3个元素组成的流体容器。左边和右边的两个是固定宽度的，很好。中间的元素调整大小以填充任何额外的空间，但似乎在外部元素后面运行。

这就是我目前的情况：（概念取自）

HTML

<div class="left">&nbsp;</div>
<div class="right">&nbsp;</div>
<div class="middle">
    <div class="progress">
        This box shouldn't overlap the outer two
    </div>
</div>

您会注意到，黄色框是页面的全宽，不受中间框的限制

中间框最终将成为流体媒体播放器进度条，需要以任意大小显示（合理范围内）。如何在中间容器中放置更多元素，并使它们具有父容器的最大宽度。我不想依赖JavaScript来实现这一点，除非我必须这样做，在这种情况下我可以编写一个解决方案，我只是想知道是否有CSS解决方案？

尝试添加：

.middle {
    padding-left: 200px;
    padding-right: 100px;
}

请在此处查看：

这将允许从中间元素的宽度中排除边栏的空间。

尝试添加：

.middle {
    padding-left: 200px;
    padding-right: 100px;
}

请在此处查看：

---

这将允许从中间元素的宽度中排除侧边栏的空间。

将

浮动：左

添加到

中间。

---

外部的div是浮动的，因此黄色框在它们后面。

将

浮动：左

添加到

中间。

---

外部div是浮动的，因此黄色框在它们后面。

一种方法是使用display:table和display:table cell

HTML:

---

Fiddle:

一种方法是使用display:table和display:table单元格

HTML:

---

Fiddle:

添加

溢出：自动

to.middle dunno如果这是您期望的添加

overflow:auto到。中间不知道如果这是你期望的哇，好吧，现在我觉得自己像个白痴。这是你错过的简单的事情！谢谢我没有忘记接受，再给我5分钟吧。填充物是谎言！但有一点很严肃：它会让你的内容从中心开始，但元素的行为会与所有内容重叠。这对于当你分析你的中间容器宽度时是不好的，它将返回一个偏离你需要的宽度（精确到300px），它是
。progress
本身，我需要外部元素之外的宽度，所以这解决了我的问题，我想，如果有人在以后的日子里发现了这一点，并且需要一些稍微不同的东西，那一定要记住这一点@Mike86通常，我只是将侧栏元素的z索引设置在中心元素上。如果这是你关心的问题，你可以用边距代替填充。检查一下：哇，现在我觉得自己像个白痴。这是你错过的简单的事情！谢谢我没有忘记接受，再给我5分钟吧。填充物是谎言！但有一点很严肃：它会让你的内容从中心开始，但元素的行为会与所有内容重叠。这对于当你分析你的中间容器宽度时是不好的，它将返回一个偏离你需要的宽度（精确到300px），它是
。progress
本身，我需要外部元素之外的宽度，所以这解决了我的问题，我想，如果有人在以后的日子里发现了这一点，并且需要一些稍微不同的东西，那一定要记住这一点@Mike86通常，我只是将侧栏元素的z索引设置在中心元素上。如果这是你关心的问题，你可以用边距代替填充。检查它：
<div class="container">
  <div class="left">&nbsp;</div>
  <div class="middle">
    <div class="progress">
        This box shouldn't overlap the outer two
    </div>
  </div>
  <div class="right">&nbsp;</div> 
</div>

.container {
  border: 1px solid #ccc;
  display: table;
}

.left,.right {
  display: table-cell;
}

.left {
  border: 2px solid green;
  height:40px;
  width:200px;
}

.right {
  border: 2px solid green;
  width:100px;
  height:40px;
}

.middle {
  border: 2px solid red;
  height:40px;
}

.progress {
  background:yellow;
  margin:0px auto;
}