右から左から左へ進行中のバーの幅を高めます
-
20-12-2019 - |
質問
進行バーは、幅を広げると左から右に向かっています。0%のように、それは私のバーの左側にあり、それは私のバーの極めて右側です。
私は私の進歩性を「右から左に成長」させることができるような方法であるならば、 "-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%;
}
.
私は私のバーでもフィドルを設定しました:プログレスバー
解決
位置決めで簡単に行うことができます。Containerをposition: relative;
に設定し、プログレスバーを絶対に位置決めしてから、コンテナの右端に対してそれを配置するようにright: 0;
を指定します。
div.completion-bar1-wraper {
/*...*/
position: relative;
}
div.completion-bar1 {
/*...*/
width: 70%;
position: absolute;
right: 0;
}
.
これは fiddle
です。他のヒント
これを行うには多くの方法がありますので、質問に答えるために、はい。 私はあなたのコードをちょっと調整し、次のようにわずかに調整しました: 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%;
}
. 完了bar1を編集してから次の
div.completion-bar1{
float: right;
height: 8px;
margin: 1px;
border-radius: 7px;
background: #cf7400;
width: 70%;
}
. 所属していません StackOverflow