从右到左增加进度条宽度答案

【问题标题】：Grow progression bar width from right to left从右到左增加进度条宽度
【发布时间】：2014-06-03 02:12:16
【问题描述】：

我有一个进度条，当我增加它的宽度时，它会从左到右。就像 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%;
}

我也为我的酒吧设置了一个小提琴：Progress Bar

【问题讨论】：

标签： html css twitter-bootstrap-3 width

【解决方案1】：

您可以通过定位轻松做到这一点。将容器设置为position: relative;，绝对定位进度条，然后指定right: 0;，使其靠在容器的右边缘。

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

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

这是fiddle。

【讨论】：

【解决方案2】：

有很多方法可以做到这一点，所以回答你的问题，是的。我已经分叉了你的代码并稍微调整了css如下：http://jsfiddle.net/adamfullen/69mJ8/

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

【讨论】：

【解决方案3】：

只需将完成栏1编辑为以下

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

【讨论】：