Несколько элементов HTML с процентной шириной

Question

Я пытаюсь создать очень простую временную шкалу только с HTML и CSS.

Это мой код:

.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; 
 
}

<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>

Вы можете увидеть его в действии на 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 Как видите, это почти 5px разница.

Как уже упоминалось @NiZa, его можно было бы решить, добавив position: relative; в элемент #timeline, но я думаю, что лучшим решением было бы использовать Flexbox.

См пример реализации временной шкалы:

#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; 
 
}

<div id="timeline"> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
<div class="timebox"></div> 
 
</div> 
 

 

 
<div id="timelinehours"> 
 
<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>

Вы можете узнать больше о Flexbox из A Complete Guide to Flexbox на CSS-Tricks или MDN docs.