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

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

Answer 3

如果你可以使用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

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

3 个答案: