Mise en page sur une seule ligne

Bonjour,

pour un site de sport je cherche à mettre sur une seule ligne les éléments suivants:

- logo équipe 1
- nom équipe 1
- « VS »
- nom équipe 2
- logo équipe 2

Le «VS» devant être au centre, le reste aligné dessus.

Jusque là tout va bien mais lorsque le nom de l'équipe est trop long our l'espace disponible ça devient galère à gérer.

J'ai fait un codepen montrant le résultat souhaité et celui obtenu:
https://codepen.io/anon/pen/rzrgGg

Pour le résultat souhaité j'ai ajouté un <br> qui ne sera évidemment pas là.

J'ai tourné le truc dans tous les sens, avec des display table/flex, des whitespace, etc. mais rien n'y fait.

auriez vous une idée?

Voir commentaire :

.match {
  font-family: sans-serif;
  text-align: center;
  max-width: 940px; /* AVEC CETTE VALEUR CA MARCHE  
MAIS UN NOM PLUS LONG ET LE PROBLÈME RESURGIT*/
  margin: 0 auto;
  background: #fed;
  padding: 1em;
}

Pour y arriver il faut rendre ton texte responsive :

https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
Modifié par Integrator (25 Aug 2017 - 15:54)

Ce n'est pas vraiment le problème, je ne vais pas m'attaquer au responsive alors que ça ne marche pas déjà pas comme ça.

Le max-width, je l'ai choisi justement arbitrairement en choisissant une valeur à laquelle ça pose problème pour l'exemple.

Dans tout les cas tu ne peux pas faire rentrer un texte plus grand que la place disponible.

Salut Kusto

C'est pas ma spécialité l'intégration masi moi je dirai que plus de div te sauverai

un div pour le logo un div pour le nom de l'équipe un div pour le VS etc etc etc
les divs feront les sauts de lignes automatiquement.
Tu dis ne pas vouloir rentrer dans le responsive dès maintenant, pourtant c'est plutôt par là qu'il faut commencer que je sache

Un design commence par la vue la plus petite et s'adapte à l'agrandissement du coup c'est toujours propre au final

pchlj a écrit :
C'est pas ma spécialité l'intégration masi moi je dirai que plus de div te sauverai ... Tu dis ne pas vouloir rentrer dans le responsive dès maintenant, pourtant c'est plutôt par là qu'il faut commencer que je sache

+1. Et du coup l'ordre "logo, texte, vs, texte, logo" n'est pas bon, il faudrait de base avoir "logo, texte, vs, logo, texte" puis modifier l'emplacement du logo de la deuxième équipe avec un "order" si l'on est en flex, avec un "caption-side" si l'on est en modèle tabulaire.

Ma solution en flexbox (sans doute a optimiser) : CodePen