从右到左生长进度条宽度

Question

我有一个渐进条，当我增加它的宽度时，它会从左到右。就像0％它在我的酒吧左边，100％这是我的酒吧的最右边。

我想知道它是否是任何方式，即我可以从右到左右使我的进步栏“成长”。如“-100％”。

这是我的html代码：

<div class="completion-bar1-wraper">
    <div class="completion-bar1"></div>
</div>

.

和css：

div.completion-bar1-wraper{
    height: 12px;
    border: 1px solid #aaa;
    border-radius: 7px;
    background: #eee;
    box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
    margin-right: 4%;
    margin-left: 3%;
    margin-top: 19%;
}
div.completion-bar1{
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}

.

我也与我的酒吧设置了小提琴：进度条

Answer 1

您可以轻松使用定位。将容器设置为生成的position: relative;，绝对位置位于进度栏，然后指定right: 0;以将其放在容器的右边缘。

div.completion-bar1-wraper {
   /*...*/
    position: relative;
}

div.completion-bar1 {
   /*...*/
    width: 70%;
    position: absolute;
    right: 0;
}

.

这是一个 fiddle 。

Answer 2

有很多方法可以做到这一点，所以回答你的问题，是的。 我已经刻破了代码并稍微调整了CSS，如下所示：

div.completion-bar1-wraper{
    height: 12px;
    border: 1px solid #aaa;
    border-radius: 7px;
    background: #eee;
    box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
    margin-right: 4%;
    margin-left: 3%;
    margin-top: 19%;
    position: relative;
}
div.completion-bar1{
    position: absolute;
    right:0;
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}

.

Answer 3

只是编辑完成条形图，按照

div.completion-bar1{
    float: right;
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}

.