css - HTMLで親divの残りの水平スペースをすべて子divで埋める方法は?

Question

この構造は次のとおりです。

<div id='container'>
    <div id='play'>▶&lt;/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 から残っているすべてのスペースを埋めますか?

score 1 · Accepted Answer

上記の不完全なコードが投稿されています。また、フォーマットが正しくありません（css）。

<div>しかし、内部のcssフロートを削除し、代わりに内部のCSSパーセンテージを宣言して、コンテナーを埋めるdisplay: inline-block;ことができるようにすると、私は「考えます」。width:<div>

score 0 · Accepted Answer

<div>後で別のものを下部に追加して<div id='time'>、スタイルを設定できますclear:both

score 0 · Accepted Answer

私は CSS で満足のいく方法でそれを行うことができなかったので、サイズ変更の試行をリッスンする JavaScript を追加しました。これにより、数学的に適切なサイズが維持されます。

3 に答える 3