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

Question

我有一个父 div，有 3 个浮动的内部 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; 
}

http://jsfiddle.net/fvuyQ/

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

Answer 1

只浮动左/右元素并为中心元素提供边距如何

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

css

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

http://jsfiddle.net/gaby/fvuyQ/4/的演示

Answer 2

如果你可以使用 CSS3，你可以使用 calc() 函数加上 box-sizing: border-box

工作小提琴：http://jsfiddle.net/EfrainReyes/4usMS/

注意：我添加box-sizing: border-box的原因是为了更容易计算中心div的宽度。如果你不想要box-sizing: border-box，你可以减去浮动div上左右边框的宽度之和，总共是6px，像这样：

.center { width: calc(100% - 50px - 80px - 6px); }

编辑： 更新了示例以使用 CSS2 定位而不是 CSS3 calc() http://jsfiddle.net/EfrainReyes/4usMS/1

Answer 3

尝试将其添加到您的 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; }