流体“自动宽度”父级的 100% 宽度答案

【问题标题】：100% width of a fluid "auto width" parent流体“自动宽度”父级的 100% 宽度
【发布时间】：2013-11-18 23:48:38
【问题描述】：

我正在尝试创建一个由 3 个元素组成的流体容器。左右两个是固定宽度，没问题。中间的元素会调整大小以填充任何额外的空间，但似乎在外部元素后面。

这是我目前所处的位置：（概念取自here）

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>

CSS

.left {
    border: 2px solid green;
    height:40px;
    width:200px;
    float: left;
}
.right {
    border: 2px solid green;
    width:100px;
    height:40px;
    float: right;
}
.middle {
    border: 2px solid red;
    width:auto;
    height:40px;
}
.progress {
    background:yellow;
    margin:0px auto;
}

Here is a fiddle to illustrate the problem您会注意到黄色框是页面的整个宽度，并且不受限于中心框。

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

【问题讨论】：

添加 overflow: auto; 到 .middle 不知道如果这是你所期望的

标签： html css css-float fluid-layout

【解决方案1】：

尝试添加：

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

在这里查看：http://jsfiddle.net/f6U9p/1/

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

【讨论】：

哇，现在我觉得自己像个白痴。这是您错过的简单事物！谢谢！
...而且我没有忘记接受，再给我5分钟。
填充是骗人的！ jsfiddle.net/f6U9p/3 但请注意：它会使您的内容从中心开始，但元素的行为会与所有内容重叠。当你分析你的中间容器宽度时，它会返回一个偏离你需要的宽度（正好 300 像素）
它是 .progress 本身，我需要在外部元素之外，所以这解决了我的问题，我想如果有人在以后发现这个并且需要一些稍微不同的东西，请记住这一点！
@Mike86 通常，我只需将侧边栏元素的 z-index 设置在中心元素上。如果这是您的担忧，您可以使用边距而不是填充。检查它：jsfiddle.net/f6U9p/4

【解决方案2】：

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

HTML：

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

CSS：

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

小提琴：http://jsfiddle.net/f6U9p/2/

【讨论】：

【解决方案3】：

将float: left 添加到.middle.

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

【讨论】：