如何讓子div在HTML中填充其父文件夾中所有剩餘的水平空間？

這個結構是：

<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％）的寬度dinamically變化。

如何將CSS設置爲#bar div填充其他div的剩餘空間？

2012-09-23 MaiaVictor

取決於您到目前爲止應用於其他元素的空間樣式。 – cdesrosiers

你已經得到了上面不完整的代碼。它的格式不正確（css）。

但我「認爲：」如果你卸下內<div> CSS的float的，而是讓他們display: inline-block;你應該能夠申報CSS在內<div>width:百分比的，並讓他們填寫您的容器。

2012-09-23 04:32:30 Stone

這是因爲我從代表CSS的JavaScript對象中進行了複製，並且做了一些未經測試的更改。謝謝，我正在閱讀關於內聯塊並現在測試您的答案。 – MaiaVictor

祝你好運，它應該工作。 – Stone

您可以<div id='time'>後在底部添加另一個<div>和設置樣式clear:both

2012-09-23 08:47:09

我不能CSS做一個令人滿意的方式，所以我增加了一個JavaScript的聆聽調整嘗試這將保持正確的數學大小。

2012-10-25 18:46:21 MaiaVictor

回答