垂直CSS條形圖出現顛倒

我想用CSS構建一個簡單的垂直溫度計。我從一個教程中拿出了一些示例代碼，其中水平溫度計中的「水銀」從左向右生長。垂直CSS條形圖出現顛倒

現在，我正在嘗試製作垂直條，如何讓「水銀」從下到上增長？

它是這樣出現的： upside down bar 但是，我希望紅色部分在灰色底部對齊。

我已經嘗試加top: 100%到#vertmeter-bar，它在正確的位置開始紅色部分。但是，爲#vertmeter-bar提供否定height屬性似乎不起作用。

這裏是我的CSS：

#vertmeter 
{ 
    height:350px; 
    width:30px; 
    background-color:#D1D7DF; 
} 
#vertmeter_bar 
{ 
    background-color:#CF3500; 
    width:100%; 
}

的HTML：

<div id="vertmeter"> 
<div id="vertmeter_bar" style="height:0%;"> 
</div> 
</div>

而且一個jQuery片段動畫過渡：

$('#vertmeter_bar').animate({height:"10%"}, 1000, 'swing');

來源

2011-06-20 Joby Taffey

#vertmeter 
{ 
    height:350px; 
    width:30px; 
    background-color:#D1D7DF; 
    position:relative; 
} 
#vertmeter_bar 
{ 
    background-color:#CF3500; 
    width:100%; 
    position:absolute; 
    bottom:0; 
}

來源

2011-06-20 13:23:14 Dave

一些定位和你的CSS將解決這個問題：

#vertmeter 
{ 
    height:350px; 
    width:30px; 
    background-color:#D1D7DF; 
    position:relative 
} 
#vertmeter_bar 
{ 
    background-color:#CF3500; 
    width:100%; 
    bottom:0; 
    position:absolute; 
}

見例子 - http://jsfiddle.net/ajthomascouk/wpPfd/

來源

2011-06-20 13:24:49 Alex

垂直CSS條形圖出現顛倒

回答

相關問題