2

私は電子メールを開発していて、画像をモバイル デバイスにのみ表示したいと考えています....そこで<td>、スパンを内部に含む空を作成し、スパンを背景画像を持つようにスタイル設定しました。

問題は、画像が見出しのすぐ隣ではなく、行全体を占めるようにしたいということです。試しclear:bothてみdisplay:blockましたが、なぜ機能しないのかわかりません。また、幅を 100% に設定しようとしましたが、すべてがうまくいきません... 何か提案はありますか?

http://jsfiddle.net/pEDSn/

.test {
    width: 41px;
    height: 41px;
    background-image: url('http://placehold.it/41x41');
    background-repeat: no-repeat;
    background-size: 41px 41px;
    display: block;
    clear: both !important;
}
4

3 に答える 3

1

1 行に 3 の配置があるため、テーブル レイアウトは および css に適用されます。

h1 を別の行に移動することをお勧めします。

<tr>
    <td> <!-- first td you are using as a spacer --> </td>
    <td> <span><!-- this is where your image is --></span> </td>
    <td> <!-- last column is here --> </td>
</tr>
<tr>
    <td colspan="3"><h1><!-- place your heading text here --></h1></td>
</tr>
于 2013-09-18T18:01:15.273 に答える
0

クラス「test」で空の行を追加しましたが、うまくいきました...チェックしてください：

<table id="headline_body_copy_top" width="532" border="0" cellspacing="0" cellpadding="0">


  <td align="left" valign="top">
    <h1 style="padding:0; margin:0;"><font size="5"><span class="headline_text">Ficaborio vellandebis arum inus es ema gimus, quibus vent.</span></font></h1>
  </td>
</tr>
<tr>
  <td height="25" class="marginResize">
    <!-- spacer -->
  </td>
</tr>

http://jsfiddle.net/pEDSn/2/

于 2013-09-18T18:04:55.670 に答える
0

この手法での の使用はbackground-image、主要な電子メール クライアントではサポートされていません。style タグで css をサポートしていないすべてのクライアントのタグをインライン化する必要があります。また、タグ内にない限り、 Outlookbackground-imageでは機能しません。<body>

モバイルでのみ画像を表示する場合は、通常の画像タグを使用して で非表示にdisplay:none;し、メディア クエリで にオーバーライドすることをお勧めしますdisplay:block;。これは、Gmail のようなインラインのみのクライアントでは機能しませんが、より適切な方法です。

于 2013-09-18T18:40:17.127 に答える