我想为我的锻炼显示一个时间线,但是所有的宽度加起来(即使它们等于 100%)都溢出了。我怎样才能让它们始终完美地适应 100% 的宽度?
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;
}
}
}
}