Css 将五个div相邻对齐

我目前正在制作一个网站，在那里你可以找到一级方程式赛车的结果。为此，我想为每场大奖赛制作一个结果页面，结果显示在相邻的5个框中。像这样：

1 2 3 4 5

但现在看起来是这样的

1 2
   3
4    5

这是我使用的HTML代码：

<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-->

有人知道如何修复吗？

请检查以下内容：

---

您可以使用泛型类，因为样式是重复的。请参见此了解有效的方法：

否则您可以遵循内联块方法，并且在时间列和显示中进一步说明：flex将非常有用：

FP1
FP2
FP3
夸尔
比赛
FP1
FP2
FP3
夸尔
比赛

如果不想滚动，请将100%/个框分开（如果窗口不太小，则可以：））

---

干杯

除了浮动之外，我还注意到了一件事：关于左边的结构，您可以使用没有%的左边距，并给出像20px一样的普通左边距，这比预期的要容易。。我是按照上面的方式做的，因为这是我用3个div的一部分。。不管怎样，谢谢，成功了。@Alex很高兴我能帮忙：）

#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;
}

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

#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-->