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:
- Les deux divs doit rester sur la même ligne.
- 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.
- Le droit div du texte doit être aligné à droite. Dans le cas de débordement, les points de suspension doivent être utilisés.
- Texte est dynamique, donc pas de pourcentages ou des largeurs fixes peuvent être utilisés.
- Seulement besoin de travailler sur
webkit
en fonction du navigateur, de sorteCSS3
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
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
Entrée
<div class='left'>This text is left aligned.</div><div class='right'>This text is right aligned.</div>
Sortie
source d'informationauteur Philip Murphy
Vous devez vous connecter pour publier un commentaire.
Je l'ai avec l'exception que lorsqu'il y a un espace vide à ma droite div est-il manger (avec le texte aligné à droite). Vous n'avez pas de liste comme demander, si je n'étais pas sûr si c'était juste la façon dont vous attiré? Violon ici: http://jsfiddle.net/mdares/fSCr6/
HTML:
CSS:
Et enfin:
À l'exception de la largeur du conteneur, Qui peut être défini en % voici une solution.
La seule fissure qui a travaillé était de mettre conteneur de fond d'écran comme celui de l'enfant.
ou encore la dernière condition est très difficile à obtenir 🙂 Juste être Vrai.
Voici le violon lien
largeur de violon
Voici le css
Voir si elle s'adapte . La dernière condition de vraiment difficile si quelqu'un a une autre solution pour la dernière image que vous avez collé alors merci de partager 🙂