html - 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 中，这就是 round($var/2.5) 也会影响您的“低”div 的原因。由于 round($var/2.5) 是内联编写的，而不是在单独的 CSS 文件中，它将忽略您的 css 文件中的任何内容，而是采用内联样式。

为防止这种情况发生，您可以将“较低的”div 放在第一个 div 的下方，而不是嵌套在其中。

此外，您没有在代码示例中关闭开始的 td 标记，尽管这可能是一个拼写错误。