0

我正在尝试使用表格制作条形图，我几乎已经按照自己的喜好完成了。我想要的最后一步是在我的图像上显示代表栏的文本。这是我迄今为止构建我的小条形图的代码：

$height = 50;

//build length
$width = 450;
$multi = $brewAvg / 5;
$width = $width * $multi;
print " <tr > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td > <img src=\"blueBar.png\"  width=\"$width\" height=\"$height\">  </td>  </tr> ";

这会产生这样的结果：

在此处输入图像描述

您可以在代码中看到我是如何根据啤酒厂评级简单地计算酒吧的长度的。我接下来要做的是在左侧每个啤酒厂的顶部显示评级数字。我将如何实现这一目标？

更新：

我尝试了我在这里阅读的教程：

http://www.kavoir.com/2009/02/css-text-over-image.html

我将代码更改为：

print "<div class=\"overlay\"> ";
            print " <tr valign=\"middle\" > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td > <img src=\"blueBar.png\"  width=\"$width\" height=\"$height\">  </td>  </tr> ";
            print" 
                <div class=\"text\">
                <p> $brewAvg  </p>
                  </div>
                </div>
            ";

我添加的CSS是这样的：

<style>
.overlay {
    position:relative;
    float:left; /* optional */
}
.overlay .text {
    position:absolute;
    top:10px; /* in conjunction with left property, decides the text position */
    left:10px;
    width:300px; /* optional, though better have one */
}


</style>

它确实将任何有价值的儿子放在了我的图像之上。所有文本都在所有条形上方的列表中，如下所示：

在此处输入图像描述

在回复中使用帮助后，我标记了答案，结果如下：

在此处输入图像描述

现在我只需要弄清楚如何将所有内容垂直居中，以便灰色背景看起来更好。谢谢您的帮助！

4

2 回答 2

1

您可以用这个替换您的打印代码：

print " <tr > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td style=\"position: relative;\"> <img style=\"z-index: 8;\" src=\"blueBar.png\"  width=\"$width\" height=\"$height\"> <span style=\"position: absolute; top: 10px; left: 10px; color:#fff; z-index: 9; font-size: 14px;\">$brewAvg</span> </td>  </tr> ";

当然，我已经硬编码，您可以将适当的样式移动到您的 CSS 文件中，并且通过更改顶部、左侧，您可以重新定位评级编号的跨度。

于 2012-10-04T03:38:21.577 回答
0

你不必做任何黑魔法来实现这一点.. 只需将啤酒厂名称和评级放在同一位置td，也许用 div 分隔。数字也可以在 a 中td，因此可以垂直对齐。就像是：

<td>1.</td>
<td>Rating<br><a>Company</a></td>
<td><img></td>
于 2012-10-04T03:38:31.800 回答