0

別のdivの中に2つのdivがあります。2つの内部divは、私のアプリケーションによって生成されたテキストを表示しています。テキストの長さはさまざまです。1つの内部div、たとえば最初のdivを、2番目の内部divによって残されたスペースを埋めるように強制する方法はありますか?

それが不可解に聞こえる場合は、以下の例を見てください...スコアボックスの幅は、表示される内容によって幅が異なります。0%が短い、100%が長い...

左側のボタンが残りのスペースを埋めて、青いボックスにぴったり収まるようにするにはどうすればよいですか。

ここに画像の説明を入力してください

4

1 に答える 1

0

可変幅でこれを行う最も簡単な方法は、偽のテーブルを使用することです。

<div id="stuff">
 <div id="name">Jesse James</div>
 <div id="percent">100%</div>
</div>


#stuff { display: table; width: 200px; }
#stuff #name { display: table-cell; width: 100%; background: gray; }
#stuff #percent { display: table-cell; background: red; }

http://jsfiddle.net/chovy/HMnSq/

于 2012-10-06T06:58:21.827 に答える