1

我一直在尝试在文本旁边显示图像。我想在与成本相同的行中显示 resources/rupee.png 图像，但成本出现在图像的底部。这是我的php代码：

...
    $display_query = mysql_query("SELECT * FROM eportal");

                        echo "<table id='pageTable'><thead><tr><th>Item code</th><th>Image</th><th>Description</th><th>Cost</th></tr></thead>";
                        echo "<tbody>";
                        while($row = mysql_fetch_array($display_query)){
                            echo "<tr><td>".$row['itemid']."</td><td>";
                            echo '<img src="resources/wh/'.$row['itemid'].'.png" title="'.$row['itemid'].'"/>';
                            echo "</td><td>".$row['description']."</td><td><span>";
                            echo '<img src="resources/rupee.png" />';
                            echo '</span><span class="cost">'.$row['cost'].'</span></td></tr>';
                        }
                        echo "</tbody>";
                        echo "</table>";
...

和相关的CSS：（我可能已经搞砸了我的CSS代码，试图这样做很长时间）

#pageTable span{
    float:left
}
#pageTable .cost{
    float:left;
}
#pageTable span img{
    padding:3px 0 0 0;
    display : inline !important;
}
4

6 回答 6

5

尽管这可能不会直接回答您的特定查询，但我认为您不应该尝试以这种方式完成任务（如果您仍然希望在当前标记中使用 'img' 元素，一些其他建议的解决方案应该可以正常工作）。

如果我正在创建这个应用程序，我要么使用相关的 Unicode 符号来表示货币（http://en.wikipedia.org/wiki/Indian_rupee_sign），要么只使用文本（“印度卢比”或其他）。如果您确实想使用特殊的图像符号，我倾向于不鼓励您在每一笔钱之前都使用“img”，因为这会造成很多重复，而且在我看来不是很干净。一个不错的解决方案可能是在一些自定义类上使用一些 CSS 伪元素：

HTML：

​&lt;span class="currency rupee">500</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

.currency:before {
    vertical-align:-2px;
    margin-right:5px;
    width: 16px;
    height: 16px;
}
.rupee:before {
    content: url(resources/rupee.png); /* Little 16x16 currency symbol */
}

​</p>

于 2012-06-14T10:33:11.367 回答
4

你不能像这样简单地对齐它们吗？我不认为你需要一些花哨的 CSS，除非你的布局需要它。

<img src="resources/rupee.png" style="vertical-align: middle"> COST_TEXT_HERE
于 2012-06-14T10:12:44.923 回答
3

在图像标签上使用对齐

<img src="" align="texttop" />
于 2012-06-14T10:14:33.370 回答
1

您似乎只想将货币符号用作文本中的图像。然后使用更简单的方法：

<img src="resources/rupee.png" alt="Rs " style="height: 1em" />42.00

（用您用来插入实际数字的任何代码替换 42.00）。

根据图像的设计，您可能需要使用 CSS 调整其垂直位置（vertical-align或者，更好的是相对定位），以使符号看起来位于文本的基线上。要获得有关此类调整的帮助，请发布图像的 URL。

于 2012-06-14T10:15:39.127 回答
0

您当然可以将图像和文本放在单独的 tds 中...

比如：（省略所有属性等）

<tr>
    <td><img /></td>
    <td><span></span></td>
    <td><img /></td>
    <td><span></span></td>
    <td><img /></td>
</tr>
于 2012-06-14T10:03:08.563 回答
0 
    <html>
    <head>
    <style>
    img{
        display : inline !important; 
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td><img src="img.png"><span class="cost">cost</span></td>
    </tr>
    </table>
    </body>
    </html>
于 2012-06-14T10:38:35.057 回答