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

否则你可以按照内联块方法，进一步按时间列和显示：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％/盒数（如果窗口不太小，则很好:)）欢呼声

Answer 3

我注意到除了浮动之外还有一件事：关于结构的左边是你可以使用margin-left而没有％并给出常见的margin-left像20px

将五个div对齐

3 个答案: