我该如何避免？

Question

我想创建一个多段进度条。它必须是水平居中的，具有最大宽度，但不是静态宽度，因此如果没有足够的空间，它可以收缩。

问题在于有时总进度为100％，但细分可能分别为33.33％和66.66％。百分比是根据文档的宽度计算的，这可能是一个奇数，因此条形段的宽度是圆形的，使条形上的一个像素为空。

HTML

<div class="CENTER">
    <div class="BAR">
        <div class="SEGMENT ONE" style="width: 33.33%;"></div>
        <div class="SEGMENT TWO" style="width: 66.66%;"></div>
    </div>
</div>

CSS

.CENTER {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.BAR {
    height: 10px;
}

.SEGMENT {
    float: left;
    height: 100%;
}

.BAR { background-color: #F00; border: 1px solid #000; }

.SEGMENT.ONE { background-color: #FDA; }

.SEGMENT.TWO { background-color: #ADF; }

在窗口宽度足以使条形达到最大宽度时，可以使用窗口的宽度。

栏右侧会有一个红色的一个像素宽的区域。

我该如何避免？

示例：http://jsfiddle.net/CV6fp

您可以使用相同的HTML并且没有JavaScript，CSS吗？

Answer 1

也许有桌子显示？

http://jsfiddle.net/CV6fp/6/

.CENTER {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.BAR {
    height: 10px;
    display: table;
    width: 100%;
}

.SEGMENT {
    display: table-cell;
    height: 100%;
}

.BAR { background-color: #F00; border: 1px solid #000; }

.SEGMENT.ONE { background-color: #FDA; }

.SEGMENT.TWO { background-color: #ADF; }

Answer 2

我将如何做到这一点：

http://jsfiddle.net/CV6fp/3/

基本上，使用类TWO将div属性从div中删除。然后使同一个div不向左浮动：

<div class="CENTER">
    <div class="BAR">
        <div class="SEGMENT ONE" style="width: 33.33%;"></div>
        <div class="SEGMENT TWO">&nbsp;</div>
    </div>
</div>

风格改变：

.SEGMENT.TWO { background-color: #ADF; float:none; }

这意味着第二段不再浮动：左，但我认为这可能是您正在寻找的。

更新：最后经过多次灵魂搜索后，我们只提供了一个CSS解决方案来解决本页提到的所有问题：

http://jsfiddle.net/CV6fp/7/

对CSS的两个更改：（1）设置为float的段：right，以及（2）.SEGEMENT.ONE以覆盖它并始终浮动：left

.SEGMENT {
    float: right;
    height: 100%;
}

.SEGMENT.ONE { background-color: #FDA; float:left; }

Answer 3

在这种情况下，您可能需要将精度降低到十分之一，并在最后一段使用ceiling舍入功能。这样你就会得到33.3％和66.7％。

Answer 4

尝试：.SEGMENT:last-child { float: none; width: auto !important; }。这应该使最后一段填满剩余的空间。

百分比宽度总和未舍入为100％

我该如何避免？

4 个答案: