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 .