同一行上的圖像文本

我一直在嘗試很長時間才能在文本旁邊顯示圖像。我想要顯示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; 
}

來源

2012-06-14 xan

CSS和HTML一起工作，你的PHP完全不相關這個問題;請發送發送給瀏覽器的相關HTML（'查看源代碼'）。 –

.. 500 ... – xan

我是通過調整保證金屬性來完成的。但我需要更優化的方式！ – xan

雖然這可能不會直接回答您的具體查詢，但我認爲您不應該試圖以這種方式完成任務（如果您仍然希望在當前標記中使用'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 */ 
}

來源

2012-06-14 10:33:11

「盧比」的Unicode符號不適用於每個瀏覽器。那是我第一次嘗試。對於所有特殊符號，我總是使用Unicode符號。 – xan

是的，不幸的是，盧比符號是Unicode 6.0+。我在文章中指定的其他替代方案應該可以作爲很好的替代方案（如果這是您想要下載的路徑，則會顯示圖標字體）。 – 2012-06-14 10:42:24

是的。雖然，感謝「之前」的提示。我完全忘了這件事。 – xan

你當然可以只具備圖像和單獨的TDS文字...

，如：（左出所有屬性等）

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

來源

2012-06-14 10:03:08

沒有更好的方法嗎？ – xan

你不能只是簡單地對齊它們嗎？我不認爲你需要一些奇特的CSS，除非你的佈局需要它。圖像標記

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

來源

2012-06-14 10:12:44 tradyblix

我找到了一個方法。更改了保證金屬性。 – xan

使用ALIGN

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

來源

2012-06-14 10:14:33

在CSS中：style =「vertical-align：text-top」。我發現這個問題的最佳解決方案。根據圖像的高度，「文字底部」可能會更好。 – Alsciende

看來你只是想用一個貨幣符號作爲文本的圖像。然後使用更簡單的方法：

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

（用您用來插入實際數字的任何代碼替換42.00）。

根據圖像的設計，您可能需要使用CSS（vertical-align或更好的相對定位）調整其垂直位置，以使該符號看起來像坐在文本的基線上。要獲得此類調整的幫助，請發佈圖像的URL。

來源

2012-06-14 10:15:39

謝謝。但我改變了我的成本保證金財產。 – xan

<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-14 10:38:35

只是「display：inline;」有什麼問題？在'img'上？ – 2012-06-14 10:46:45

joesavage，你很緊張，顯示：塊是沒有必要的。我刪除它。 –

同一行上的圖像文本

回答

相關問題