将五个div对齐

Question

我目前正在建立一个网站,您可以在其中找到一级方程式比赛的结果.为此,我想为每个大奖赛制作一个结果页面,其结果显示在彼此相邻的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

请查看:http://jsfiddle.net/itz2k13/KAwEz/

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

您可以使用泛型类,因为样式是重复的.看到这个有效的一个:http://jsfiddle.net/itz2k13/KAwEz/1/