css - 宽度总和为 100% 的元素倾向于上溢/下溢

Question

我想为我的锻炼显示一个时间线，但是所有的宽度加起来（即使它们等于 100%）都溢出了。我怎样才能让它们始终完美地适应 100% 的宽度？

http://jsfiddle.net/Lzqvk/

HTML：

<div class="workoutTimeline">
 <div class="section vertical yellow" style="width:7.117437722419928%">
  <div class="exercise" style="width:33.33333333333333%"></div>
  <div class="exercise" style="width:33.33333333333333%"></div>
  <div class="exercise" style="width:33.33333333333333%"></div>
 </div>
 <div class="section vertical orange" style="width:35.58718861209964%">
  <div class="exercise" style="width:50%"></div>
  <div class="exercise" style="width:50%"></div>
 </div>
 <div class="section vertical red" style="width:32.02846975088968%">
  <div class="exercise" style="width:5.555555555555555%"></div>
  <div class="exercise" style="width:5.555555555555555%"></div>
  <div class="exercise" style="width:5.555555555555555%"></div>
 </div>
 <div class="section vertical blue" style="width:21.352313167259783%">
  <div class="exercise" style="width:100%"></div>
 </div>
 <div class="section vertical purple" style="width:7.117437722419928%">
  <div class="exercise" style="width:25%"></div>
  <div class="exercise" style="width:25%"></div>
  <div class="exercise" style="width:25%"></div>
  <div class="exercise" style="width:25%"></div>
 </div>
</div>​

CSS：

.workoutTimeline {
    height: 20px;
    width: 100%;

    .section {
        float: left;
        opacity: 0.5;
        height: 100%;

        &.active {
            opacity: 1;
        }

        .exercise {
            float: left;
            opacity: 0.5;
            height: 100%;

            &.active {
                opacity: 1;
            }
        }
    }
}