我有一个进度条,当我增加它的宽度时,它从左向右移动。比如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%;
}
我也设置了进度条:
您可以通过定位轻松做到这一点。设置容器为position: relative;
,绝对放置进度条,然后指定right: 0;
将其放置在容器的右边缘。
div.completion-bar1-wraper {
/*...*/
position: relative;
}
div.completion-bar1 {
/*...*/
width: 70%;
position: absolute;
right: 0;
}
有很多方法可以做到这一点,所以回答你的问题,是的。我已经分叉你的代码和调整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%;
}
将completion_bar1编辑为
div.completion-bar1{
float: right;
height: 8px;
margin: 1px;
border-radius: 7px;
background: #cf7400;
width: 70%;
}