largeur dynamique pour la durée

Question

Ceci est mon code (s'il vous plaît voir this fiddle):

HTML

<div id="container"> 
    <span id="left">Left text</span> 
    <span id="middle">Very very very very very long middle text.</span> 
    <span id="right">Right text</span> 
</div> 

CSS

#container { 
    white-space: nowrap; 
    position: relative; 
} 

#left { 
    border: solid 1px red; 
} 

#middle { 
    border: solid 1px green; 
} 

#right { 
    border: solid 1px blue; 
    position: absolute; 
    right: 0px; 
} 

Je veux la largeur de #middle rétrécir comme la fenêtre devient plus petite pour ne pas entrer en conflit avec #right.

Answer 1

Si que vous utilisez une bibliothèque comme jQuery/Mootools etc.

Ensuite, il sera très facile, voir ici (en utilisant jQuery):

http://jsfiddle.net/6AHSp/15/

Answer 2

J'utilise l'exemple de Sandeep pour ceci:

http://jsfiddle.net/VaDBX/

overflow: hidden ne fonctionne que si vous utilisez height. C'est un peu sale, mais fonctionne bien sans aucun JS.