CSS和Javascript垂直对齐问题

让我先说这个，说我根本不了解CSS。我正在尝试使用CSS和Javascript制作一个性能栏，并且我目前为止创建了一个栏背景，然后是一个栏，将其填充到指定的百分比。我的问题是，“内部酒吧”从顶部而不是从底部开始。我可以从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; 
}

Javascript代码

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

感谢。

来源

2011-01-11 user535617

看到它的行动你尝试更改垂直对齐到底？ –

这就像我做的第一件事。 – user535617

既然你已经设置.performanceBack到position: absolute我会做同样为.performanceBar，但设置bottom属性0这将使锚定的.performanceBack的左下角。

.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垂直对齐问题

回答

相关问题