如何使许多其他左浮动固定宽度div的最左边占据剩余空间？

问题描述

| 我要这个：

+--CONTAINER DIV--------------+ <--- width 50%       | <--- screen edge
|+---------+ +------+ +------+|                      |
||DIV1     | | DIV2 | | DIV3 ||                      |
|+---------+ +------+ +------+|                      |
+-----------------------------+                      |

在缩小浏览器窗口宽度时，我希望DIV1相应缩小（尽可能多的像素）。同样，当使窗口变宽时，我希望DIV1占据父容器的所有剩余空间。 DIV2和3为固定宽度。怎么样？     

解决方法

在此示例中，我已从所有div中删除了填充和边距。 给容器宽度50％，给2和3绝对宽度。第一位保留默认的“ 1”宽度。 您可以将div 2和div首先放在标记中，然后将其浮动。然后使div的右边距等于2和3的宽度相加。 在这里查看小提琴：http://jsfiddle.net/P33hY/1/ 的HTML：

<div id=\"container\">
    <div id=\"two\">2</div>
    <div id=\"three\">3</div>
    <div id=\"one\">1 - Cras justo odio,dapibus ac facilisis in,egestas eget quam. Fusce dapibus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus.</div>
</div>

CSS：

div{
    padding:0; margin:0;
}
#container{
    width: 50%;   
    border: 1px solid silver;
    background:gold;
}
#one{
    background:blue;
    margin-right:160px;
}
#two{
    background:green;
}
#three{
    background:red;
}
#two,#three{
    width: 80px;   
    float: right;
}

    ,

<div id=\"right\">
    <div id=\"right1\"></div>
    <div id=\"right2\"></div>
</div>
<div id=\"left\"></div>


#right{
    float:right;
    width:400px;
    height:500px;
    background:red;   
}
#right1,#right2{
    width:200px;
    height:500px;
}
#right1{
    background:yellow;
    float:left;
}
#right2{
    background:green
}

#left{
    margin-right: 200px;
    height:500px;
    background:blue;
}

在http://jsfiddle.net/9dMY5/查看工作示例