Question

我正在尝试创建一个由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解决方案？

Answer 1

尝试添加：

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

在此处查看：http://jsfiddle.net/f6U9p/1/

这样可以将侧边栏的空间从中间元素的宽度中排除。

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

Answer 3

将float: left添加到.middle.

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

100％宽度的液体＆＃34;自动宽度＆＃34;亲

3 个答案: