Html 扩展3个浮动div的中心以适应父容器div的宽度

我有一个父div，有3个浮动的内部div。左div和右div的大小是静态的，但是我希望中间div能够扩展到适合父容器的大小

<div class="parent-container">
    <div class="left"></div>
    <div class="center">this should expand to fit the parent container</div>
    <div class="right"></div>
<div>

.parent-container
{
    overflow: auto;
    width: 100%;
    border: 1px solid pink;
}

.left { width: 50px; }
.right { width: 80px; }

.left, .center, .right
{ 
    float: left; 
    border: 1px solid black; 
    height: 100px; 
}

这应该扩展以适合父容器
.父容器
{
溢出：自动；
宽度：100%；
边框：1px纯红；
}
.左{宽度：50px；}
.右{宽度：80px；}
.左、.中、.右
{ 
浮动：左；
边框：1px纯黑；
高度：100px；
}

---

我试过将宽度设置为100%，但不起作用。有没有简单的方法可以做到这一点？

尝试将其添加到css中

.center { 
    width: 100%;
    min-width: 100%; //add this if you always want it to be 100% of the parent
}

.left, .right, .center {
    display: inline-block;
    position: relative;
}

你可能也应该加上这个

.parent-container {
     float: left;
     display: block;
     position: relative;
}

另外，如果我正确理解了你的问题，你可能会想要这样的东西

.right, .left { position: absolute; }
.right { top: 0; right: 0; }
.left { top: 0; left: 0; }

---

如果您同意使用CSS3，则可以使用

calc（）

函数和

box size:border box

工作小提琴：

注意：我之所以添加

框大小：边框框

是为了更容易计算中心div的宽度。如果您不想要

框大小：边框框

，可以减去浮动div上左右边框的宽度之和，总计为6px，如下所示：

.center{宽度：计算（100%-50px-80px-6px）；}

---

编辑：更新示例，使用CSS2定位，而不是CSS3

calc（）

仅浮动左/右元素，并为中间元素提供边距如何

<div class="parent-container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">this should expand to fit the parent container</div>
<div>

---

演示在

这不起作用，中间div中的文本浮动到父容器的左上角，然后添加。中间{padding:0 10%；}将百分比更改为任何可用或使用像素的值。老实说，添加更多div会让代码变得更好。比如一个或三个包装器。你能更新一下说明你所说的更多div是什么意思吗？这似乎是一个很好的解决方案，但我确实需要跨大多数浏览器的兼容性（可能不包括ie6）。好吧，你可以使用定位，就像这样：我已经接受了这个答案，因为它不需要在中间div填充来调整文本，答案可以在提供的JSFIDLE中测试

.left { width: 50px;float: left; }
.right { width: 80px;float: right; }
.center{border:1px solid green;margin:0 80px 0 50px;}
.left, .right
{ 
    border: 1px solid black; 
    height: 100px; 
}