Comment aligner cette scope à droite du div?

J’ai le code HTML suivant:

Cumulative performance 20/02/2011

avec ce CSS:

 .title { display: block; border-top: 4px solid #a7a59b; background-color: #f6e9d9; height: 22px; line-height: 22px; padding: 4px 6px; font-size: 14px; color: #000; margin-bottom: 13px; clear:both; } 

Si vous vérifiez ce jsFiddle: http://jsfiddle.net/8JwhZ/

vous pouvez voir que le nom et la date sont collés ensemble. Existe-t-il un moyen pour que la date soit alignée sur la droite? J’ai essayé le float: right; sur la deuxième mais cela visser le style, et pousse la date en dehors de la div enfermant

Si vous pouvez modifier le HTML: http://jsfiddle.net/8JwhZ/3/

 
Cumulative performance 20/02/2011
.title .date { float:right } .title .name { float:left }

Travailler avec des flotteurs est un peu compliqué:

Cela comme beaucoup d’autres astuces de mise en page “sortingviales” peuvent être faites avec Flexbox.

  div.container { display: flex; justify-content: space-between; } 

En 2017, je pense que c’est la solution préférée (over float) si vous n’avez pas à supporter les anciens navigateurs: https://caniuse.com/#feat=flexbox

Cochez fiddle comment les différentes utilisations de float se comparent à flexbox (“peut inclure des réponses concurrentes”): https://jsfiddle.net/b244s19k/25/ . Si vous avez encore besoin de restr avec float, j’ai recommandé la troisième version bien sûr.

Une solution alternative aux flotteurs est d’utiliser le positionnement absolu:

 .title { position: relative; } .title span:last-child { position: absolute; right: 6px; /* must be equal to parent's right padding */ } 

Voir aussi le violon

Vous pouvez le faire sans modifier le code HTML. http://jsfiddle.net/8JwhZ/1085/

 
Cumulative performance 20/02/2011
.title span:nth-of-type(1) { float:right } .title span:nth-of-type(2) { float:left }

La solution en utilisant flexbox sans justify-content: space-between .

 
Cumulative performance 20/02/2011
.title { display: flex; } span:first-of-type { flex: 1; }

Lorsque nous utilisons flex:1 sur le premier , il occupe tout l’espace restant et déplace le second vers la droite. Le violon avec cette solution: https://jsfiddle.net/2k1vryn7/

Voici https://jsfiddle.net/7wvx2uLp/3/ vous pouvez voir la différence entre deux approches flexbox: flexbox avec justify-content: space-between et flexbox avec flex:1 sur le premier .