DIV内の動的なサイズの要素

Question

私は内部にDIVと3つのインライン要素を持っています。

中心要素は、幅を予測できない動的テキストです。テキストはDIVの中央に水平に配置されます。 DIVのサイズは固定です。

左の要素が左に固定され、テキストに達するまで流れていきたいと思います。同様に、右の要素がちょうどDIV（右：0または何か）の最後に、テキストと終了後に開始する必要があります

最終的な結果は次のようなものです：

111111 my-text 222222 

1111 longer-text 2222 

幅の合計常にDIVの幅に加算され、左の要素のサイズは右の要素のサイズと等しくなります。

これを行うには良い方法はありますか？

EDIT：

は、私はどちらかjavascriptやテーブルを使用していただけ二つの方法を考え出しました。私はテーブルを使用し、それは正常に働いた。

div 
{ 
    display: table; 
} 

#111, #222 
{ 
    width: 100%; 
    display: table-cell; 
} 

Answer 1

センターエレメントの幅を100％にすることができます。 text-align：center;

Answer 2

おそらく？

<div style="width:500px;border:1px solid #000;"> 

<span>1111</span> 
<span style="text-align:center">dynamic text</span> 

<span style="text-align:right; float:right;">2222</span> 

</div>