将五个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;
}

有人知道怎么修复吗？

- Alex

Answer 1

请检查这个链接：http://jsfiddle.net/itz2k13/KAwEz/。

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

您可以使用通用类，因为样式是重复的。请参考此链接以获取高效的代码示例：http://jsfiddle.net/itz2k13/KAwEz/1/。

- Chubby Boy

---

这比我预期的要容易得多...我按照上面的方法做了，因为这是我在使用3个div时的一部分。无论如何，谢谢，它起作用了。 - Alex

Answer 2

或者您可以采用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％/盒子数量分开（如果窗口不太小的话就没问题了 :) ） 干杯

- G-Cyrillus

Answer 3

除了float:left之外，我还注意到另一个与结构有关的问题，那就是你可以使用非百分比的margin-left，并给出常见的margin-left，例如20px。

- Mitesh Vora