多个HTML元素，百分比宽度

Question

我正在尝试使用HTML和CSS构建一个非常简单的时间轴。

这是我的代码：

＆＃13;

＆＃13;

.timebox {
  float: left;
  height: 2px;
  background: #7D80E6;
  position:absolute;
}

.timeboxhour {
  width: 4.16%;
  float: left;
  height: 2px;
  background: #eee;
  color: #666;
  font-size: 0.8em;
  text-align: left;
}

＆＃13;

<div id="timeline" style="background: #fff;width: 100%;height: 2px;margin: 0 auto;">
<div class="timebox" style="margin-left:0%;width:1.04%;"></div>
<div class="timebox" style="margin-left:4.16%;width:1.04%;"></div>
<div class="timebox" style="margin-left:8.32%;width:1.04%;"></div>
<div class="timebox" style="margin-left:12.48%;width:1.04%;"></div>
<div class="timebox" style="margin-left:16.64%;width:1.04%;"></div>
<div class="timebox" style="margin-left:20.8%;width:1.04%;"></div>
<div class="timebox" style="margin-left:24.96%;width:1.04%;"></div>
<div class="timebox" style="margin-left:29.12%;width:1.04%;"></div>
<div class="timebox" style="margin-left:33.28%;width:1.04%;"></div>
<div class="timebox" style="margin-left:37.44%;width:1.04%;"></div>
<div class="timebox" style="margin-left:41.6%;width:1.04%;"></div>
<div class="timebox" style="margin-left:45.76%;width:1.04%;"></div>
<div class="timebox" style="margin-left:49.92%;width:1.04%;"></div>
<div class="timebox" style="margin-left:54.08%;width:1.04%;"></div>
<div class="timebox" style="margin-left:58.24%;width:1.04%;"></div>
<div class="timebox" style="margin-left:62.4%;width:1.04%;"></div>
<div class="timebox" style="margin-left:66.56%;width:1.04%;"></div>
<div class="timebox" style="margin-left:70.72%;width:1.04%;"></div>
<div class="timebox" style="margin-left:74.88%;width:1.04%;"></div>
<div class="timebox" style="margin-left:79.04%;width:1.04%;"></div>
<div class="timebox" style="margin-left:83.2%;width:1.04%;"></div>
<div class="timebox" style="margin-left:87.36%;width:1.04%;"></div>
<div class="timebox" style="margin-left:91.52%;width:1.04%;"></div>
<div class="timebox" style="margin-left:95.68%;width:1.04%;"></div>
</div>


<div id="timelinehours" style="background: #fff;width: 100%;height: 2px;margin: 0 auto;">
<div class="timeboxhour" >0</div>  
<div class="timeboxhour" >1</div>   
<div class="timeboxhour" >2</div> 
<div class="timeboxhour" >3</div> 
<div class="timeboxhour" >4</div>    
<div class="timeboxhour" >5</div>     
<div class="timeboxhour" >6</div>   
<div class="timeboxhour" >7</div> 
<div class="timeboxhour" >8</div>   
<div class="timeboxhour" >9</div>    
<div class="timeboxhour" >10</div>  
<div class="timeboxhour" >11</div>       
<div class="timeboxhour" >12</div>  
<div class="timeboxhour" >13</div>  
<div class="timeboxhour" >14</div>    
<div class="timeboxhour" >15</div> 
<div class="timeboxhour" >16</div>  
<div class="timeboxhour" >17</div> 
<div class="timeboxhour" >18</div>     
<div class="timeboxhour" >19</div> 
<div class="timeboxhour" >20</div>    
<div class="timeboxhour" >21</div>  
<div class="timeboxhour" >22</div>     
<div class="timeboxhour" >23</div>  
</div>

＆＃13;

＆＃13;

＆＃13;

您可以在JS Fiddle上看到它。

时间轴宽度为100％，4.16％代表一小时（100/24 = 4.16）。 小蓝条的宽度为1.04％，因此它代表15分钟。

但正如你所看到的，它并不能很好地运作，因为蓝条并不总是在正确的位置：

有人可以解释我的问题吗？

Answer 1

将position:relative;添加到您的#timeline。

Answer 2

这是一个四舍五入的问题。由于width值为百分比，因此会计算为8.81463px之类的数字，然后浏览器将其舍入为9px。对于一个元素，它应该不是问题，但如果它是24个元素，8.81463px * 24给出211.55px，而9px * 24给出216px如你所见，它几乎是{{} 1}}差异。

正如@NiZa已经提到的，可以通过将5px添加到position: relative;元素来解决，但我认为更好的解决方案是使用Flexbox。

请参阅时间轴的示例实现：

#timeline

#timeline {
  display: flex;
  background: #fff;
  width: 100%;
  height: 2px;
  margin: 0 auto;
}
.timebox {
  height: 2px;
  background: #7D80E6;
  width: 1.04%;
  margin-right: auto;
}
#timelinehours {
  display: flex;
  background: #fff;
  width: 100%;
  height: 2px;
  margin: 0 auto;
}
.timeboxhour {
  height: 2px;
  background: #eee;
  color: #666;
  font-size: 0.8em;
  text-align: left;
  flex: 1;
}

您可以从CSS上的A Complete Guide to Flexbox或MDN docs了解有关Flexbox的更多信息。