如何使子div填充HTML中其父div的所有剩余水平空间？

Question

测试http://o7.no/U5w2EV

其结构为：

<div id='container'>
    <div id='play'>▶</div>
    <div id='res'>RES</div>
    <div id='bar'>test</div>
    <div id='time'>0</div>
</div>

样式是：

用于＃容器

 #container
{backgroundColor:'#CCCCCC',
position:'absolute',
bottom:'-40px',
width:'100%',
height:'40px'}

用于按钮#res和#bar

#res , #bar
 {width:30px; 
 height:30px; 
 border:1px solid #DDDDDD; 
 margin:5px; 
 font-weight:bold; 
 cursor:pointer; 
 float:left}

持续＃时间

#time
 {float:'left',fontSize:'16px',margin:'12px 5px'}

注意：容器的宽度（占用100％的容器）会发生动态变化。

如何将#bar div的CSS设置为填充其他div剩余的所有空间？

Answer 1

您上面发布的代码不完整。 它的格式也不正确（css）。

但是，如果删除内部<div>上的css浮点数，而是让它们display: inline-block;我会“思考” display: inline-block; 您应该能够声明CSS width:内部<div>上的百分比，并将其填充到您的容器中。

Answer 2

您可以在<div id='time'>之后在底部添加另一个<div>并将样式设置为clear:both

Answer 3

我无法以令人满意的方式使用CSS进行此操作，因此我添加了JavaScript来侦听调整大小的尝试，这将使其在数学上保持正确的大小。