L'alignement de cinq vrd uns à côté des autres

Je suis en train de faire un site web où vous pouvez trouver les résultats des courses de Formule Un. Pour ce faire, je veux faire une page de résultat pour chaque Grand Prix, où les résultats sont affichés dans les 5 cases en regard les uns des autres. Comme ceci:

1 2 3 4 5

Mais pour l'instant il ressemble à ceci

1 2
   3
4    5

C'est le code HTML que j'utilise:

<div id="wrap">
    <div id="fp1">FP1</div>
    <div id="fp2">FP2</div>
    <div id="fp3">FP3</div>
    <div id="qual">Qual</div>
    <div id="race">Race</div>
</div> <!--End wrap div-->

Et ce le CSS j'utilise:

#wrap{
width: 100%;
height: 600px;
background-color: #000;
border: 1px solid white;
}
#fp1{
width: 20%;
height: 600px;
background-color: #333;
float: left;
}
#fp2{
margin-left: 20%;
width: 20%;
height: 600px;
background-color: #666;
}
#fp3{
margin-left: 40%;
width: 20%;
height: 600px;
background-color: #333;
}
#qual{
margin-left: 60%;
width: 20%;
height: 600px;
background-color: #666;
float: right;
}
#race{
width: 20%;
height: 600px;
background-color: #333;
float: right;
}

Quelqu'un qui sait comment le résoudre?

OriginalL'auteur Alex | 2013-06-08

  1. 7

    veuillez vérifier: http://jsfiddle.net/itz2k13/KAwEz/

    #fp1{
  width: 20%;
  height: 600px;
  background-color: #333;
  float: left;
}
 .....

    Vous pouvez utiliser une classe générique, car les styles sont répétitifs. voir ce pour efficace: http://jsfiddle.net/itz2k13/KAwEz/1/

    Eh bien, c'était plus facile que prévu.. je fait de la façon ci-dessus parce que c'est la partie de la façon dont je l'ai fait avec 3 divs.. en tout cas merci, ça a fonctionné.
    Content d'avoir pu aider 🙂

    OriginalL'auteur Sabarish Sankar

  2. 0

    d'autre, vous pouvez suivre inline-block de la méthode, et plus loin dans le temps et de colonne d'affichage:flex sera utile:
    http://codepen.io/seraphzz/pen/IosFk 

    #wrap {
  white-space:nowrap;
}
#wrap, .wrap {

  /* for test */
  height:200px;
overflow:auto;}
.wrap {
  -moz-column-width:300px;
  -webkit-column-width:300px;
  column-width:300px;
}
#wrap div {
  white-space:normal;
  display:inline-block;
}
#wrap div , .wrap div {
/* for test */
  width:300px;
  height:100%;
  background:#999;
}
    <div id="wrap">
    <div id="fp1">FP1</div>
    <div id="fp2">FP2</div>
    <div id="fp3">FP3</div>
    <div id="qual">Qual</div>
    <div id="race">Race</div>
</div> <!--End wrap div-->
<div class="wrap" >
    <div id="fp1">FP1</div>
    <div id="fp2">FP2</div>
    <div id="fp3">FP3</div>
    <div id="qual">Qual</div>
    <div id="race">Race</div>
</div> <!--End wrap div-->

    Si vous ne voulez pas de défilement, divisez 100%/nombre de boîtes (fine si la fenêtre de pas trop petit 🙂 )
    cheers

    OriginalL'auteur G-Cyr

  3. 0

    Encore une chose que j'ai remarqué autre que float:left concernant la structure, vous pouvez utiliser la marge de gauche, sans % et donner de la commune de la marge de gauche comme 20px

    OriginalL'auteur Mitesh Vora