同一行上的图像文字

时间:2012-06-14 09:58:57

标签: html css image

我一直试图在文本旁边显示图像很长时间。我想在与成本相同的行中显示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;
}

6 个答案:

答案 0 :(得分:5)

虽然这可能无法直接回答您的具体查询,但我认为您不应该尝试以这种方式完成任务(如果您仍然希望在当前标记中使用'img'元素,一些其他建议的解决方案应该工作正常。)

如果我正在创建此应用程序,我会使用相关的Unicode符号来表示货币(http://en.wikipedia.org/wiki/Indian_rupee_sign),或者我只使用文本(“印度卢比”或其他)。如果你想要使用一个特殊的图像符号,我会倾向于阻止你在每一笔钱之前使用'img',因为这会产生很多重复,而且我认为不是很清洁。一个很好的解决方案可能是在一些自定义类上使用一些CSS伪元素:

<强> HTML:

​<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 */
}

答案 1 :(得分:4)

难道你不能简单地将它们对齐吗?除非你的布局需要,否则我认为你不需要一些花哨的CSS。

<img src="resources/rupee.png" style="vertical-align: middle"> COST_TEXT_HERE

答案 2 :(得分:3)

在图片标记上使用对齐

<img src="" align="texttop" />

答案 3 :(得分:1)

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

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

(用你用来插入实际数字的代码替换42.00。)

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

答案 4 :(得分:0)

你当然可以将图像和文字单独分开...

喜欢:(省略所有属性等)

<tr>
    <td><img /></td>
    <td><span></span></td>
    <td><img /></td>
    <td><span></span></td>
    <td><img /></td>
</tr>

答案 5 :(得分: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>