1

セットアップ:

 <table width="600" >
    <tr>
        <td width="400" rowspan="2" valign="top">
            With very long content here*
        </td>
        <td width="200" valign="top">
            Top-aligned content
        </td>
    </tr>
    <tr>
      <td valign="bottom">
          *Bottom-aligned content loses vertical alignment
             and appears as if valign="middle"              
       </td>
    </tr>
 </table>

コード例は長すぎるため jsfiddle にあります (バグを引き起こすには多くのコンテンツが必要です)。

したがって、これらを参照してください：

http://jsfiddle.net/webhelpla/XZyg2/電子メールとして送信しても問題ないようです

http://jsfiddle.net/webhelpla/XZyg2/1/メールとして送信: 下揃えのコンテンツは下揃えではなくなりました。

これに対する回避策のアイデアや経験はありますか?

4

3 に答える 3

0

vertical-align:bottom;同様に追加してみてください、

  <td valign="bottom" style='vertical-align:bottom;' >
      *Bottom-aligned content loses vertical alignment
         and appears as if valign="middle"              
   </td>

このフィドルを試してみてください。私rowspan=2はtdからを削除し、常にその代わりにセルパディングを使用します。

于 2012-10-04T18:02:36.970 に答える
0

Outlook には、特定のサイズ (私の記憶が正しければ 2300px) を超えるブロックのコンテンツに関する問題があります。右側の行の 3 番目のセルで問題を回避できる場合があります。

 <table width="600" >
    <tr>
        <td width="400" rowspan="3" valign="top">
            With very long content here*
        </td>
        <!-- Add minimal heights to force the middle row to take the space -->
        <td width="200" valign="top" height="1">
            Top-aligned content
        </td>
    </tr>
    <tr><td style="page-break:always"><!-- Let's make a page break *here* --></td></tr>
    <tr>
      <td valign="bottom" height="1">
          *Bottom-aligned content loses vertical alignment
             and appears as if valign="middle"              
       </td>
    </tr>
 </table>
于 2012-10-04T21:47:55.250 に答える
0

table-layout:fixed をテーブルの css に追加し、それが役立つかどうかを確認します。Coder1984 は td 内に "style=" タグを追加する点で正しいです。これは、一部の電子メール クライアントがそのほうがうまくいくためです....

とにかく、さまざまなクライアントで HTML 電子メールがどのように表示されるかを予測することは非常に困難です。私はAcid 上の電子メールを使用して、Web メールから電子メール クライアント、モバイルまで、さまざまなクライアントでのレンダリングをチェックしています。

于 2012-10-04T20:39:03.510 に答える