css - 5 つの div を並べて配置する

Question

現在、F1 レースの結果がわかるウェブサイトを作成中です。そのために、各グランプリの結果ページを作成したいと考えています。結果は 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-->

そして、これは私が使用するCSSです：

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

それを修正する方法を知っている人はいますか？

Answer 1

構造に関して float:left 以外に気付いたもう 1 つのことは、% なしで margin-left を使用し、20px のような一般的な margin-left を指定できることです。