圖片文字在同一行
[英]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;
}
6 個解決方案
解決方案1
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 */
}
解決方案2
4 2012-06-14 10:12:44
您不能簡單地像這樣對齊它們嗎？ 我認為除非布局要求，否則您不需要花哨的CSS。
<img src="resources/rupee.png" style="vertical-align: middle"> COST_TEXT_HERE
解決方案3
3 2012-06-14 10:14:33
在圖片標簽上使用對齊
<img src="" align="texttop" />
解決方案4
1 2012-06-14 10:15:39
似乎您只想使用貨幣符號作為文本中的圖像。 然后使用一種更簡單的方法：
<img src="resources/rupee.png" alt="Rs " style="height: 1em" />42.00
（用插入實際數字的任何代碼替換42.00）。
根據圖像的設計，您可能需要使用CSS調整其垂直位置（ vertical-align或更好的相對位置），以使符號看起來位於文本的基線上。 要獲得有關此類調整的幫助，請發布圖像的URL。
解決方案5
0 2012-06-14 10:03:08
您當然可以將圖像和文本放在單獨的tds中...
例如：（忽略所有屬性，等等）
<tr>
<td><img /></td>
<td><span></span></td>
<td><img /></td>
<td><span></span></td>
<td><img /></td>
</tr>
解決方案6
0 2012-06-14 10:38:35
<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.