Comment placer deux div côte à côte où l'un gauche est dimensionné pour s'adapter et l'autre occupe l'espace restant?

Je suis en train de placer deux div est à côté de l'autre avec les critères suivants:

  1. Les deux divs doit rester sur la même ligne.
  2. La priorité doit être donnée à la gauche de la div. Autant de texte que possible doit être affiché à la gauche de la div, jusqu'au point où l'ellipse est utilisé en cas de dépassement.
  3. Le droit div du texte doit être aligné à droite. Dans le cas de débordement, les points de suspension doivent être utilisés.
  4. Texte est dynamique, donc pas de pourcentages ou des largeurs fixes peuvent être utilisés.
  5. Seulement besoin de travailler sur webkit en fonction du navigateur, de sorte CSS3 solution est préférable.

Voici quelques exemples d'images de la façon dont il devrait ressembler:

Entrée

<div class='left'>I should always fit. If not, ellipsis should be used.</div><div class='right'>Right align and fit me if space available here.</div>

Sortie

Comment placer deux div côte à côte où l'un gauche est dimensionné pour s'adapter et l'autre occupe l'espace restant?

Entrée

<div class='left'>I should always fit. If not, ellipsis should be used. And some more text and more, and more text.</div><div class='right'>Right align and fit me if space available here.</div>

Sortie

Comment placer deux div côte à côte où l'un gauche est dimensionné pour s'adapter et l'autre occupe l'espace restant?

Entrée

<div class='left'>This text is left aligned.</div><div class='right'>This text is right aligned.</div>

Sortie

Comment placer deux div côte à côte où l'un gauche est dimensionné pour s'adapter et l'autre occupe l'espace restant?

source d'informationauteur Philip Murphy