Css 强制元素使用固定宽度元素之间100%的可用空间？

我有一个div被用作其他3个div的容器。它们都是水平排列的，使用

float:left

。我需要

左

和

右

div保持相同的固定宽度40px。我希望中间的div能够动态扩展——如果可能的话，只使用CSS

下面是我正在试验的JSFIDLE：

如果您将我的

.middle

CSS类的宽度更新为620px，这就是我要寻找的结果，其中

middle

div被尽可能地扩展，同时保持自身与其他两个div水平对齐

无论容器的宽度如何，我希望中间的div始终扩展到左侧区域的100%，设置：

width: 100%;

---

这不管用。有人知道实现这一点的方法吗？

如果您可以更改标记，这可能会起作用：

<div class="container">
    <div class="left"></div>  
    <div class="right"></div>
    <div class="middle"></div>
</div>

看

---

或者，您可以使用绝对定位，尽管这在IE7及以下版本中可能是一个难题。但这确实允许您保持DOM顺序

<div class="container">
    <div class="left"></div>  
    <div class="middle"></div>
    <div class="right"></div>
</div>

---

有关演示，请参阅。

如果您可以更改标记，这可能会起作用：

<div class="container">
    <div class="left"></div>  
    <div class="right"></div>
    <div class="middle"></div>
</div>

看

---

或者，您可以使用绝对定位，尽管这在IE7及以下版本中可能是一个难题。但这确实允许您保持DOM顺序

<div class="container">
    <div class="left"></div>  
    <div class="middle"></div>
    <div class="right"></div>
</div>

有关演示，请参阅。

。 2种选择：

显示：表格

display:flex

display:table

适用于所有浏览器，包括IE8。

Display:flex

仍在发展中，尚未成熟，许多浏览器在这方面存在困难。 然后我建议只

显示：table

别搞错了，这只是CSS，您的标记中没有
。
来自您的结构。
2种选择：

显示：表格
display:flex
display:table
适用于所有浏览器，包括IE8。
Display:flex
仍在发展中，尚未成熟，许多浏览器在这方面存在困难。
然后我建议只
显示：table

别搞错了，这只是CSS，您的标记中没有
。
不知道您是否可以使用flexbox，但以下内容适用于Chrome、Firefox和Safari

.container
{
    height: 100px;
    width: 700px;
    border: 1px solid black;
    display: box;
    display: -moz-box;
    display: -webkit-box;
}

.left, .right
{
    height: 100%;
    width: 40px;
    background-color: red;
    -moz-box-flex: none;
    -webkit-box-flex: none;
    box-flex: none;
}

.middle
{
    background-color: blue;
    height: 100%;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

你可以看到小提琴
不知道你是否可以使用flexbox，但是下面的内容可以在Chrome、Firefox和Safari上使用

.container
{
    height: 100px;
    width: 700px;
    border: 1px solid black;
    display: box;
    display: -moz-box;
    display: -webkit-box;
}

.left, .right
{
    height: 100%;
    width: 40px;
    background-color: red;
    -moz-box-flex: none;
    -webkit-box-flex: none;
    box-flex: none;
}

.middle
{
    background-color: blue;
    height: 100%;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

您可以在@Jeroen的css中看到小提琴，您还需要添加一件事：

html, body {
    height: 100%;
}

.middle {
    height: 100%;
    margin: 0 40px;
}  

.left {
    width: 40px;
    float: left;
}

.right {
    width: 40px;
    float: right;
}

我添加的是将
高度实际设置为100%。如果未将父图元的高度设置为100%，则无法将高度100%应用于子图元

请参阅此演示。
除了@Jeroen的css之外，您还需要添加一项内容：

html, body {
    height: 100%;
}

.middle {
    height: 100%;
    margin: 0 40px;
}  

.left {
    width: 40px;
    float: left;
}

.right {
    width: 40px;
    float: right;
}

我添加的是将
高度实际设置为100%。如果未将父图元的高度设置为100%，则无法将高度100%应用于子图元

请参见此演示。
您可以更改标记的（顺序）吗？你需要支持哪些浏览器？我想顺序可能会改变。您的意思是将
左
和
右
div放在一起吗？它们应该仍然按照我得到它们的顺序显示。如果可能的话，还有所有（主要）浏览器。我的意思是，浮动元素排在第一位，最后的“中间”div用自动宽度（和边距，这样它就不会与浮动边栏重叠）占据剩余的空间。你的解决方案正是我所需要的！谢谢-请随意发布答案。您能更改标记的（顺序）吗？你需要支持哪些浏览器？我想顺序可能会改变。您的意思是将
左
和
右
div放在一起吗？它们应该仍然按照我得到它们的顺序显示。如果可能的话，还有所有（主要）浏览器。我的意思是，浮动元素排在第一位，最后的“中间”div用自动宽度（和边距，这样它就不会与浮动边栏重叠）占据剩余的空间。你的解决方案正是我所需要的！谢谢-请随意发布答案。IE10我相信支持flex-box，所以如果你只是在看现代浏览器，你可能会在css中添加-ms前缀。IE10我相信支持flex-box，所以如果你只是在看现代浏览器，您可能会将-ms前缀添加到css中。此问题类似于以下内容：此问题类似于以下内容：