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

Question

我想要这个:

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

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

Answer 1

对于这个例子，我已经从所有 div 中删除了填充和边距。

给容器宽度 50%，以及 2 和 3 它们的绝对宽度。 Div one 保持默认的 auto 宽度。

您可以将 div 2 和 3 放在标记的最前面，然后将它们向右浮动。然后使 div one 的右边距等于 2 和 3 宽度相加。

在这里查看 fiddle :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;
}