[英]Image text on same line
我一直在尝试在文本旁边显示图像。 我想在与成本相同的行中显示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;
}
尽管这可能无法直接回答您的特定查询,但我认为您不应该尝试以这种方式完成任务(如果您仍希望像在当前标记中一样使用'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 */
}
您不能简单地像这样对齐它们吗? 我认为除非布局要求,否则您不需要花哨的CSS。
<img src="resources/rupee.png" style="vertical-align: middle"> COST_TEXT_HERE
在图片标签上使用对齐
<img src="" align="texttop" />
似乎您只想使用货币符号作为文本中的图像。 然后使用一种更简单的方法:
<img src="resources/rupee.png" alt="Rs " style="height: 1em" />42.00
(用插入实际数字的任何代码替换42.00)。
根据图像的设计,您可能需要使用CSS调整其垂直位置( vertical-align
或更好的相对位置),以使符号看起来位于文本的基线上。 要获得有关此类调整的帮助,请发布图像的URL。
您当然可以将图像和文本放在单独的tds中...
例如:(忽略所有属性,等等)
<tr>
<td><img /></td>
<td><span></span></td>
<td><img /></td>
<td><span></span></td>
<td><img /></td>
</tr>
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.