当前位置: 动力学知识库 > 问答 > 编程问答 >

CSS and Javascript vertical alignment problem

问题描述:

let me preface this by saying I don't really know CSS at all. I'm trying to make a performance bar using CSS and Javascript and what I have so far creates a bar background and then a bar inside that one that fills it up to the specified percentage. My problem is that the "inner bar" comes down from the top instead of up from the bottom. I could just subtract the percentage from 100 and take the absolute value, but that seems like kind of a dirty hack. I would like to just see how I could make this be aligned at the bottom and "grow" up as the height grows rather than starting at the top and growing down.

CSS Code

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

}

Javascript code

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

Thanks.

网友答案:

Since you've already set .performanceBack to position: absolute I would do the same for .performanceBar but set the bottom property to 0 which will make it anchored to the bottom-left corner of .performanceBack.

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

You can see it in action at http://jsfiddle.net/U5V2b

分享给朋友:
您可能感兴趣的文章:
随机阅读: