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

Question

test 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

 #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

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

注意：容器容器的宽度（取100％的容量）会发生变化。

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

Answer 1

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

但我“想”如果你删除内部<div>上的css浮点数而不是display: inline-block;，你应该能够在内部width:上声明CSS <div>百分比{1}}并让他们填满你的容器。

Answer 2

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

Answer 3

我无法以令人满意的方式使用CSS，所以我添加了一个JavaScript来监听调整大小的尝试，这将使它在数学上保持正确的大小。