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 を、実際の数値を挿入するために使用するコードに置き換えます)。

画像のデザインによってはvertical-align、シンボルがテキストのベースライン上にあるように見えるように、CSS を使用して垂直方向の位置を調整する必要がある場合があります (または、相対位置を調整することをお勧めします)。このような調整のヘルプを得るには、画像の 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 に答える