진행률 표시줄 너비를 오른쪽에서 왼쪽으로 늘립니다.

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

여기에는 깡깡이.

Answer 2

이 작업을 수행하는 방법에는 여러 가지가 있습니다. 나는 귀하의 코드를 분리하고 다음과 같이 약간 조정했습니다. 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%;
}

.

Answer 3

완료 BAR1을 다음으로 편집

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

.