css - 将五个 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/

Answer 2

除了 float:left 关于结构，我注意到的另一件事是您可以使用不带 % 的 margin-left 并给出常见的 margin-left 像 20px

Answer 3

否则，您可以遵循 inline-block 方法，并在时间列和 display:flex 中进一步使用：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-->

如果您不想滚动，请划分 100%/数量的框（如果窗口不太小，则可以：））欢呼