web-dev-qa-db-fra.com

Comment placer deux divs côte à côte où l'un à gauche est dimensionné pour que l'autre puisse occuper le reste

J'essaie de placer deux divs l'un à côté de l'autre avec les critères suivants:

  1. Les deux divs doivent rester sur la même ligne.
  2. La priorité doit être donnée à la div gauche. Le plus de texte possible doit être affiché dans la partie gauche jusqu'au point où Ellipsis est utilisé en cas de dépassement.
  3. Le texte de la bonne div doit être aligné à droite. Ellipsis doit être utilisé en cas de débordement.
  4. Le texte étant dynamique, aucun pourcentage ni largeur fixe ne peut être utilisé.
  5. Ne doit fonctionner que sur un navigateur basé sur webkit, la solution CSS3 est donc préférable.

Voici quelques exemples d’images:

Contribution 

<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

enter image description here

Contribution  

<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

enter image description here

Contribution 

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

Sortie

enter image description here

css3htmlellipsis
14
Philip Murphy

Je l’ai excepté que quand il ya un espace vide, mon div de droite le mange (avec le texte aligné à droite). Vous n'indiquez pas cela comme une demande, donc je ne savais pas si c'était juste comment vous l'aviez dessiné? Fiddle ici: http://jsfiddle.net/mdares/fSCr6/

HTML: 

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, and then: </div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, Some Text, Repeat, Repeat, Repeat, ,Some Text,</div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, </div>
    <div class="right">other Text ttt</div>
</div>

CSS: 

.container {
    width: 600px;
}
.left {
    max-width: 100%;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:Ellipsis;
    -ms-text-overflow:Ellipsis;
    float: left;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:Ellipsis;
    -ms-text-overflow:Ellipsis;
    text-align: right;
}

Et enfin:

enter image description here

9
Matthew

Excepté la largeur du conteneur Cela peut être défini dans% voici une solution . La seule fissure qui a fonctionné a été de placer le fond du conteneur comme celui d’un enfant.

ou bien la dernière condition est vraiment difficile à atteindre :) Juste être Vrai.

Voici le lien de violon

largeur du violon

Voici le css 

.container {
width: 100%;
overflow:hidden;
whitespace:nowrap;
max-width:100%;
    background-color:red;
}
.left {
    width:auto;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:Ellipsis;
    -ms-text-overflow:Ellipsis;
    float: left;
    position:absolute;
    max-width:inherit;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:Ellipsis;
    -ms-text-overflow:Ellipsis;
    text-align: right;
    width:auto;
    float:right;
}

Voir si cela convient. Dernière condition vraiment difficile si quelqu'un a une autre solution à la dernière image que vous avez collée puis partagez s'il vous plaît :)

0
Anobik