Css位置相對或絕對可變高度

Question

我一直在嘗試對齊圖像上顯示的「低」文本和箭頭。基本上我想要我將文本和箭頭（低）對齊藍色圖表下面的一些像素。即圖3.

我從我的數據庫中生成藍色條，並創建一個表。下面是代碼：

.lower { 
    display: block; 
    font-size:7pt; 
    color:#666666; 
    position:relative; 
    bottom: 5px; 
    left:-25px; 
} 

<td valign="bottom" style="width:8px;height:20px;" 
    <div style="padding: 0px;width:8px;height:" . round($var/2.5) . "px;background-position:bottom;background-repeat:no-repeat; display: block;"> 
     <div class="lower" >Low <img src="icon-sort-up.png" /> 
     </div> 
    </div> 
</td> 

圓（$ VAR/2.5），即一個計算我的高對準我的「高」的文字和箭頭，但一些如何影響我的低文本。

a busy cat http://sandbox.visistat.com/partner-reports/live3/pulse.png

Answer 1

你嵌套你的 「低」 的div到你 「高」 的div，這就是爲什麼圓（$ VAR/2.5）也影響到你的 「下」 分區。由於輪迴（$ var/2.5）是內聯寫入的，而不是單獨的CSS文件，因此它將忽略css文件中的任何內容，並改爲使用內聯樣式。

爲了防止出現這種情況，您可以將第一個div下面的「lower」div放入其中，而不是嵌套在第一個div中。

此外，您還沒有在您的代碼示例中關閉您的開放td標籤，儘管這可能是一個錯字。