CSS와 Javascript의 수직 정렬 문제

나는 CSS를 전혀 모른다는 말로 머리말을 붙이겠습니다. 나는 CSS와 자바 스크립트를 사용하여 성능 표시 줄을 만들려고하고 있는데, 지금까지 막대 배경을 만든 다음 지정된 백분율로 채우는 막대를 만듭니다. 내 문제는 "안쪽 바"가 아래쪽에서 위쪽으로 아래로 내려 오는 것입니다. 100에서 백분율을 빼고 절대 값을 취할 수는 있지만 더러운 해킹 같은 것 같습니다. 나는 이것이 꼭대기에서 시작해서 자라기보다는 높이가 자라면서 이것이 바닥에 정렬되도록하고 어떻게 성장할 수 있는지보고 싶습니다.CSS와 Javascript의 수직 정렬 문제

CSS 코드

.cssSmall .performanceBack 
{ 
    position: absolute; 
    z-index: 1; 
    height: 20px; 
    width: 18px; 
    top: 4px; 
    left: 81%; 
    background-color: Brown; 
} 

.cssSmall .performanceBar 
{ 
    font-size: 6px; 
    vertical-align: top; 
    background-color: Orange; 
}

자바 스크립트 코드

this.performanceBack = gDocument.createElement("performanceBack"); 
this.performanceBack.className = "performanceBack"; 

div.appendChild(this.performanceBack); 

this.performanceBar = document.createElement('div'); 
this.performanceBar.className = 'performanceBar'; 
//Hard coded value for testing 
this.performanceBar.style.height = '30%'; 
this.performanceBack.appendChild(this.performanceBar);

감사합니다. 이미 position: absolute에 .performanceBack을 설정 한 이후

출처

2011-01-11 user535617

에 행동에 그것을 볼 수 있습니까? –

그것은 내가했던 첫 번째 것과 같았습니다. – user535617

나는 .performanceBar에 대해 동일한 작업을 수행하지만 .performanceBack의 왼쪽 아래에 고정 할 것 0에 bottom 속성을 설정합니다.

.cssSmall .performanceBar 
{ 
    font-size: 6px; 
    background-color: Orange; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
}

당신은 당신이 아래로 수직 정렬을 변경하려고 않았다 http://jsfiddle.net/U5V2b

출처

2011-01-11 17:12:07 jessegavin

이것은 아름답게 작동했습니다, 감사합니다! – user535617

CSS와 Javascript의 수직 정렬 문제

답변

관련 문제