Discussion :

[tengalice49]

Bonjour,

J'aimerais réaliser une page pour afficher les résultats des matchs de football. Avec flexbox, j'ai réussi à mettre le score et les deux équipes sur la même ligne, cependant, je voudrais que les scores soient alignés sur la même colonne, et je ne veux pas utiliser de tableau.

Voici le code html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<h3>Vendredi 4 août 2017</h3>
<div id="overlay_match"><div id="overlay_heure">20h45</div><div id="overlay_equipe">Monaco</div><div id="overlay_score">3-2</div><div id="overlay_equipe">Toulouse</div></div>
*
<h3>Samedi 5 août 2017</h3>
<div id="overlay_match"><div id="overlay_heure">17h15</div><div id="overlay_equipe">Paris-SG</div><div id="overlay_score">2-0</div><div id="overlay_equipe">Amiens</div></div>

Et le code CSS:
#overlay_match

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
{
****display: flex;
****justify-content: space-around;
****padding: 10px;
****border-radius: 10px;
****text-align: center;
****background: #2C362E;
****position: relative;
****margin:5px;
}

J'obtiens donc le résultat suivant:


Je voudrais que les heures, les équipes (domicile et extérieur) et le score soient aligner, comment faire ?

Merci pour votre aide.