수직 CSS/HTML5 진행률 막대

Question

세로 막대와 같은 종류의 백분율을 변경할 수 있지만 세로 형식으로 변경할 수 있으므로이 도구를 사용하여 가로 세로선을 얻는 데 성공했습니다. CSS Progress Bar 하지만 지금은 수직으로 에뮬레이션하고 싶습니다.

Is there a way that I can do this. 이것은 당신이 필요하지만 경우

<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div>&nbsp;</div> 
</div> 
</div> 

.score { 
width:34px; 
height:141px; 
background: url(/assets/images/accordion/score.png) no-repeat 0 0px; 
} 
.score-completed { 

width:26px; 
margin-left: -1px; 
background: url(/assets/images/accordion/score.png) no-repeat 1px 0; 
} 
.score-completed div { 
float: right; 
height: 50%; 
width:26px; 
margin:99px 1px 0 0; 
background: url(/assets/images/accordion/score.png) no-repeat 100% 100%; 
display: inline; /* IE 6 double float bug */ 
} 

Answer 1

나는 이유를 볼 수 없습니다 다음과 같은 시도는 IE에서 테스트되지 않았지만 모든 최신 브라우저에서 작동해야합니다.

#outer { 
    width: 30px; 
    height: 140px; 
    overflow: hidden; 

    position: relative; 
} 

#inner, #inner div { 
    width: 100%; 
    overflow: hidden; 
    position: absolute; 
} 

#inner { 
    bottom: 0; 
    height: 0%; 
} 

#inner div { 
    top: 0; 
    width: 100%; 
    height: 5px; 
} 

기본 아이디어는 막대의 각 요소를 위치로 옮기기 위해 절대적으로 배치 된 div을 사용하는 것입니다. top: 0으로 진행 막대의 맨 위에 배치 된 둥근 상단을 얻으려면 상단 부분의 가장 안쪽에있는 div입니다. 진행률 표시 줄 자체는 아래쪽에 bottom: 0으로 맞춰져 있습니다.

여기 간단한 데모를 설정했습니다 : http://www.jsfiddle.net/sNLXn/. 데모에서는 경계선과 배경을 사용하여 진행 막대를 보여 주지만 실제로는 대신 이미지를 사용해야합니다.

Answer 2

나도 몰라 :

이

은 수직 막대 코드입니다

당신은 (백분율에서 .score-completed 사업부를 CSS 규칙의 높이를 변경할 수 있습니다 현재 50 %)를 고정 된 높이 (예 : 40 픽셀)로 설정합니다. 그런 다음 녹색 막대를 더 크게 만들려면 높이에 픽셀을 추가하고 여백에서 같은 크기의 픽셀을 삭제할 수 있습니다 (현재 99 픽셀).

예를 들어 높이를 49px로 지정하려면 여백을 90px (높이를 추가했기 때문에 -9 픽셀) 여야합니다.

편집 : 바를 사용하여 각 div에 id를 추가 한 다음 CSS 규칙을 만들 수 있습니다.

<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div id="first">&nbsp;</div> 
</div> 
</div> 
<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div id="second">&nbsp;</div> 
</div> 
</div> 

그럼 당신은 높이와 마진 제거 : 당신의 .score-completed div에서 99px를 예를 들면 각 막대에 대한 새로운 CSS 규칙을 만들 : 예를 들어

#first {margin:99px 1px 0 0; height:40px; } 
#second {margin:90px 1px 0 0; height:49px; }