Question

让我先说一下我根本不懂CSS。我正在尝试使用CSS和Javascript创建一个性能栏，到目前为止我创建了一个条形背景，然后在那个填充它达到指定百分比的条形图中。我的问题是“内部条”从顶部向下而不是从底部向下。我可以从100减去百分比并取绝对值，但这看起来像是一种肮脏的黑客。我想知道如何让它在底部对齐并随着高度的增长而“增长”，而不是从顶部开始并逐渐减少。

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

感谢。

Answer 1

由于您已将.performanceBack设置为position: absolute，我会对.performanceBar执行相同操作，但会将bottom属性设置为0，这将使其成为.performanceBack锚定在.cssSmall .performanceBar { font-size: 6px; background-color: Orange; position: absolute; left: 0; bottom: 0; width: 100%; }的左下角。

{{1}}

您可以在http://jsfiddle.net/U5V2b

看到它的实际效果

CSS和Javascript垂直对齐问题

1 个答案: