レスポンシブ電子メール、HTMLテーブルの作成

私は、リトマスをテストツールとして使用して、キャンペーンモニタのための反応的なeDMを作成中です。レスポンシブ電子メール、HTMLテーブルの作成

私は以下のイメージのようなテーブルを得るためにいくつかの問題に遭遇しました。

私の現在のコードは次のようになります。ドキュメントのサイズはすべて600ピクセルですが、このテーブルは540ピクセルの中央に配置する必要があります。

<table border="0" cellspacing="0" cellpadding="0" class="content" align="center"> 
<tr> 
    <td colspan="3"> 
    <table width="100%" bgcolor="#ffffff"> 
     <tr> 
     <td class="gutter">&nbsp;</td> 
     <td class="spacer-medium">&nbsp;</td> 
     <td class="gutter">&nbsp;</td> 
     </tr> 
     <tr> 
     <td class="gutter">&nbsp;</td> 


      <tr width="540" height="148" style="background-image: url('rectangle.png'); background-size:100% 100%; background-repeat: no-repeat; width: 540px; padding-top:20px; padding-left:20px; padding-right:10px;color: #ffffff; font-family: Arial, Helvetica; font-size: 14px; line-height: 20px;" class="__not-plain-text gradient__image centre" background="rectangle.png" bgcolor="#f36d00"> 

      <td width="400" align="left" style="float:left; width:400px; font-weight:bold;">TEXT GOES HERE AS BOLD</td> 
      <td width="400" align="left" style="float:left; width:400px;">LONGER PARAGRAPH TO GO HERE AS NORMAL</td> 
      <td><img src="images/man2.png" align="right" alt="offer" width="109" style="width: 109px; float:right padding-right:10px" class="__not-plain-text"></td> 
      </tr> 
     </tr> 
    </table> 
    </td> 
</tr>

任意の助けいただければ幸いです！ありがとうございました。

出典

2016-07-17 joshzee

私は電子メールのためにZurbの財団をチェックするためにあなたをお勧めします：http://foundation.zurb.com/emails/docs/（それはあなたの問題への解決策ではないのですが、あなたのように」ちょうど "開始"、それは電子メールテンプレートを作成するためのよりよい方法かもしれません） – moped

この問題の解決方法は少し複雑です。あなたは、大部分のメールクライアントであなたのメールが正しく表示されることを確認するために大量のコードが必要になります。このスニペットで働いてみ、私はそのひどく長い以来、JSfiddleに設定：ここでのコードのように

https://jsfiddle.net/ojyr085t/

またはそのを：

<style> 
@media screen and (max-width: 480px) { 

      /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */ 
      .fluid, 
      .fluid-centered { 
       width: 100% !important; 
       max-width: 100% !important; 
       height: auto !important; 
       margin-left: auto !important; 
       margin-right: auto !important; 
      } 
      /* And center justify these ones. */ 
      .fluid-centered { 
       margin-left: auto !important; 
       margin-right: auto !important; 
      } 

      /* What it does: Forces table cells into full-width rows. */ 
      .stack-column, 
      .stack-column-center { 
       display: block !important; 
       width: 100% !important; 
       max-width: 100% !important; 
       direction: ltr !important; 
      } 
      /* And center justify these ones. */ 
      .stack-column-center { 
       text-align: center !important; 
      } 

      /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */ 
      .center-on-narrow { 
       text-align: center !important; 
       display: block !important; 
       margin-left: auto !important; 
       margin-right: auto !important; 
       float: none !important; 
      } 
      table.center-on-narrow { 
       display: inline-block !important; 
      } 
</style> 
<html><body> 
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 680px;"> 
<tr> 
        <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. --> 
        <td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;"> 
         <!--[if mso]> 
         <table border="0" cellspacing="0" cellpadding="0" align="center" width="660"> 
         <tr> 
         <td align="center" valign="top" width="660"> 
         <![endif]--> 
         <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;"> 
          <tr> 
           <td align="center" valign="top" style="font-size:0; padding: 10px 0;"> 
            <!--[if mso]> 
            <table border="0" cellspacing="0" cellpadding="0" align="center" width="660"> 
            <tr> 
            <td align="left" valign="top" width="220"> 
            <![endif]--> 
            <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column"> 
             <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
              <tr> 
               <td dir="ltr" style="padding: 0 10px 10px 10px;"> 
                <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow"> 
               </td> 
              </tr> 
             </table> 
            </div> 
            <!--[if mso]> 
            </td> 
            <td align="left" valign="top" width="440"> 
            <![endif]--> 
            <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column"> 
             <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
              <tr> 
               <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow"> 
                <strong style="color:#111111;">Class aptent taciti sociosqu</strong> 
                <br><br> 
                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
               </td> 
              </tr> 
             </table> 
            </div> 
            <!--[if mso]> 
            </td> 
            </tr> 
            </table> 
            <![endif]--> 
           </td> 
          </tr> 
         </table> 
         <!--[if mso]> 
         </td> 
         </tr> 
         </table> 
         <![endif]--> 
        </td> 
       </tr> 
       </table> 
</body></html>

出典

2016-07-18 08:41:19 Niqql

ちょっとこれは身近に見える、私はコードの作品を賭ける:) http://tedgoas.github.io/Cerberus/ –

こんにちは、リンクありがとう起源！私はこれをずっと前に保存しましたが、ソースを見つけることができませんでした！ :) – Niqql

ニクラス・フェットの答えに構築するために、私は彼を取りましたあなたの電子メールの幅で更新します。これは、@mediaクエリをサポートする電子メールクライアントの場合は応答性の高い電子メール設計と、（メディアクエリをサポートしない電子メールクライアントの場合は）ハイブリッド電子メール設計の組み合わせです。少し複雑ですが、以下のスニペットを使用してメールを作成することができます。

また、適切にネストされた<table>タグに注意してください。の中に直接<tr>をネストすることはできません。

@media screen and (max-width: 600px) { 
 

 
      /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */ 
 
      .fluid, 
 
      .fluid-centered { 
 
       width: 100% !important; 
 
       max-width: 100% !important; 
 
       height: auto !important; 
 
       margin-left: auto !important; 
 
       margin-right: auto !important; 
 
      } 
 
      /* And center justify these ones. */ 
 
      .fluid-centered { 
 
       margin-left: auto !important; 
 
       margin-right: auto !important; 
 
      } 
 

 
      /* What it does: Forces table cells into full-width rows. */ 
 
      .stack-column, 
 
      .stack-column-center { 
 
       display: block !important; 
 
       width: 100% !important; 
 
       max-width: 100% !important; 
 
       direction: ltr !important; 
 
      } 
 
      /* And center justify these ones. */ 
 
      .stack-column-center { 
 
       text-align: center !important; 
 
      } 
 
     
 
      /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */ 
 
      .center-on-narrow { 
 
       text-align: center !important; 
 
       display: block !important; 
 
       margin-left: auto !important; 
 
       margin-right: auto !important; 
 
       float: none !important; 
 
      } 
 
      table.center-on-narrow { 
 
       display: inline-block !important; 
 
      }

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" background="rectangle.png"> 
 
<tr> 
 
\t     <!-- dir=rtl : This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. --> 
 
        <td dir="rtl" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;"> 
 
         <!--[if mso]> 
 
         <table border="0" cellspacing="0" cellpadding="0" align="center" width="600"> 
 
         <tr> 
 
         <td align="center" valign="top" width="600"> 
 
         <![endif]--> 
 
         <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;"> 
 
          <tr> 
 
           <td align="center" valign="top" style="font-size:0; padding: 10px 0;"> 
 
            <!--[if mso]> 
 
            <table border="0" cellspacing="0" cellpadding="0" align="center" width="600"> 
 
            <tr> 
 
            <td align="left" valign="top" width="220"> 
 
            <![endif]--> 
 
            <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column"> 
 
             <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
 
              <tr> 
 
               <td dir="ltr" style="padding: 0 10px 10px 10px;"> 
 
                <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow"> 
 
               </td> 
 
              </tr> 
 
             </table> 
 
            </div> 
 
            <!--[if mso]> 
 
            </td> 
 
            <td align="left" valign="top" width="440"> 
 
            <![endif]--> 
 
            <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column"> 
 
             <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
 
              <tr> 
 
               <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow"> 
 
                <strong style="color:#111111;">Class aptent taciti sociosqu</strong> 
 
                <br><br> 
 
                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
               </td> 
 
              </tr> 
 
             </table> 
 
            </div> 
 
            <!--[if mso]> 
 
            </td> 
 
            </tr> 
 
            </table> 
 
            <![endif]--> 
 
           </td> 
 
          </tr> 
 
         </table> 
 
         <!--[if mso]> 
 
         </td> 
 
         </tr> 
 
         </table> 
 
         <![endif]--> 
 
        </td> 
 
       </tr> 
 
       </table>

出典

2016-07-19 02:02:28

レスポンシブ電子メール、HTMLテーブルの作成

答えて

関連する問題