css - 如何让子 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 float的，而是让它们成为 display: inline-block;你应该能够声明 CSS width:内部百分比<div>的并让它们装满您的容器。