メール本文の中にdivを配置するにはどうすればいいですか？

私は長年働いていた電子メールテンプレートを作成しようとしました。私は、私のウェブサイトから送信される確認メールの本文にDIVを並べて配置しようとしています。あなたが見ることができるように私はここにfloat:leftを使用しようとするが、私はまた、コンテナ（.view-content）でdisplay:tableを使用してみましたが、その他のDIVでそれぞれdisplay:table-rowとdisplay:table-cellメール本文の中にdivを配置するにはどうすればいいですか？

 <div class="view-content" style="margin-bottom: 20px;"> 
     <h3 style="margin: 0px;font-size: 14px;background-color: #eff1f7;border-top: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;padding: 15px 15px 0 15px;">TESTO 925 - temperaturmätare, typ K, radio, larm,</h3> 
    <div class="views-responsive-grid views-responsive-grid-horizontal views-columns-3 checkout"> 
     <div class="views-row views-row-1 views-row-first" style="background-color: #eff1f7;border-bottom: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;margin: 0px;"> 
     <div class="views-column views-column-1 views-column-first" style="color: #000;"> 

     <div class="views-field views-field-line-item-label" style="float: left;"> <span class="views-label views-label-line-item-label" style="font-weight: bold;font-size: 13px;">Artikelnr: </span> <div class="field-content artikelnr">0560 9250</div> </div> 
     <div class="views-field views-field-commerce-unit-price" style="float: left;"> <span class="views-label views-label-commerce-unit-price" style="font-weight: bold;font-size: 13px;">Pris: </span> <div class="field-content price">995 kr</div> </div> 
     <div class="views-field views-field-quantity" style="float: left;"> <span class="views-label views-label-quantity" style="font-weight: bold;font-size: 13px;">Antal: </span> <div class="field-content antal">1</div> </div> 
     <div class="views-field views-field-commerce-total" style="float: left;"> <span class="views-label views-label-commerce-total" style="font-weight: bold;font-size: 13px;">Summa: </span> <div class="field-content price">995 kr</div> </div> </div> 
     </div> 
     </div> 
     </div>

：だから、結果として電子メールで私はこれを持っています。私が試した他のものはdisplay:blockとdisplay:inline-block ...運がないです。だから私はここで間違って何をしていますか？上記のクラスビューを持つDIVSは、互いに隣り合うことを拒否する理由は何ですか？私はシンプルなテーブルを使うことができない理由がありますが、ここで説明するのに時間がかかります。

UPD：OK、私は最終的にこれを放棄し、ため、Outlook 2013のような人気の電子メールクライアントにDIVの位置決めのためのサポートを欠いているの単純なテーブルのアプローチを使用する必要があります...

出典

2017-01-11 TBJ

cssコードのいくつかのビットがもっと理解するのに役立つかもしれません。 – semuzaboi

HTML電子メールテンプレートを作成すると、divではなくテーブルを使用することになります。このチュートリアルを参照してください：https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770 –

はい、私はそれを参照してくださいOutlook 2010のdivの位置のサポートなし/ 13など...私は私のアプローチを再考する必要があります。とにかくおかげで、とにかく:-)。 – TBJ

オプションは除いて考えるべきですMailタグを作成するときにテーブルタグ用に使用します.SendGridはテーブルタグを使用してコード化されたメールを送信します。

2つのDIVを異なる幅または同じ幅で2つ作成すると、合計で600ピクセルになります。モバイルデバイスに両方のDIVをスタック可能にするには、maxwidthを適用します。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title></title> 
    <link rel="stylesheet" href=""> 
</head> 
<body> 
    <table style="max-width:600px;font-family:Arial,Helvetica,sans-serif" align="center" width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tbody> 
     <tr> 
      <td valign="top"> 
      <table style="text-align:left" align="center" width="100%" border="0" cellpadding="0" cellspacing="0"> 
       <tbody> 
       <tr> 
        <td style="width:100%;border:1px solid #dddddd" valign="top"> 
        <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
         <tbody> 
         <tr> 
          <td valign="top"> 
          <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
           <tbody> 
           <tr> 
            <td style="padding:5px 10px 5px 10px;border-bottom:3px solid #2e3192" valign="top"> 
            <table style="max-width:600px" width="100%" border="0" cellpadding="0" cellspacing="0"> 
             <tbody> 
             <tr> 
              <td> 
              <img src="http://images.sixrevisions.com/2009/02/03-09_3d_logo_tutorial.jpg" style="display:block;max-width:80%;margin-right:15px" align="left" border="0" class="CToWUd" width="150px" height="80px"> 
              </td> 

             </tr> 
             </tbody> 
            </table> 
            </td> 
           </tr> 
           <tr> 
            <td style="font-family:Arial;font-size:15px;padding-top:9px;padding-bottom:9px" width="100%"> 
            <span style="color:#000000;font-weight:bold;font-size:15px;padding-left:9px;font-family:arial">Dear</span> 
            <span style="font-size:14px;font-weight:bold">Amandeep,</span> 

            <br> 
            </td> 
           </tr> 
           <tr> 
            <td><table width="100%" border="0" cellpadding="0" cellspacing="0"> 
            <tbody> 
             <tr> 
             <td style="background:#f1f1f1;padding:7px"> 
              <table style="font-family:Arial;font-size:14px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0"> 
              <tbody> 
               <tr> 
               <td style="background:#ffffff;padding:10px"> 
                <table style="font-family:Arial;font-size:14px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0"> 
                <tbody> 
                 <tr> 
                 <td> 
                  <h1 style="color:#4e4e4e;font-size:18px;font-weight:bold;display:inline;padding-right:10px">Teddybear Soft Toy </h1> 
                 </td> 
                 </tr> 
                 <tr> 
                 <td colspan="" rowspan="" headers="" style="border-bottom:1px solid #c4c4c4;padding-top:10px"></td> 
                 </tr> 
                </tbody> 
                </table> 
               </td> 
               </tr> 
               <tr> 
               <td align="center"> 
                <div style="display:inline-block;max-width:350px;width:100%;vertical-align:middle"> 
                <table style="padding:5px;font-family:Arial;font-size:13px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0"> 
                 <tbody> 
                 <tr> 
                  <td colspan="2">We Want To Buy Teddybear Soft Toy. Kindly share the quotation for the same.</td> 
                 </tr> 
                 </tbody> 
                </table> 
                </div> 
                <div style="display:inline-block;max-width:220px;width:100%;text-align:center;vertical-align:middle"> 
                <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0"> 
                 <tbody> 
                 <tr> 
                  <td align="center"><a style="padding:10px 20px;text-align:center;text-decoration:none;font-weight:bold;border:1px solid #5e9122;background:#5e9122;background:-webkit-gradient(linear,left top,left bottom,from(#5e9122),to(#5e9122));background:-moz-linear-gradient(top,#5e9122,#5e9122);color:#ffffff;border-radius:4px;font-size:17px;width:200px;display:table-cell;margin-left:auto;margin-right:auto" rel="external" href="#">Contact Buyer 
                  </a></td> 
                 </tr> 
                 </tbody> 
                </table> 
                </div> 
               </td> 
               </tr> 
              </tbody> 
              </table> 
             </td> 
             </tr> 
            </tbody> 
            </table> 
           </td></tr> 
           </tbody> 
          </table> 
          </td> 
         </tr> 
         </tbody> 
        </table> 
        </td> 
       </tr> 
       </tbody> 
      </table> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</body> 
</html>

あなたはこのサイトからのすべてのメールクライアント上の魅力のようなPUTSMAIL 作品をあなたのメーラーをテストすることができます。

出典

2017-01-11 16:13:20

この例をありがとう。非常に便利！ – TBJ

私もPUTSMAILを使ってテストしています。 –

私の例も掲載します。 Sudhir Kaushikの例は良く見えます。

<head> 
 
    <style> 
 
    #outlook a{padding:0}body{width:100%!important;background-color:#333;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;margin:0!important;padding:0!important}.ReadMsgBody{width:100%}.ExternalClass{width:100%}ol li{margin-bottom:15px}img{height:auto;line-height:100%;outline:none;text-decoration:none}#backgroundTable{height:100%!important;margin:0;padding:0;width:100%!important}p{margin:1em 0}h1,h2,h3,h4,h5,h6{color:#222!important;font-family:Arial,Helvetica,sans-serif;line-height:100%!important}table td{border-collapse:collapse}.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span{color:#000;text-decoration:none!important;border-bottom:none!important;background:none!important}.im{color:#000}div[id='tablewrap']{width:100%;max-width:600px!important}table[class='fulltable'],td[class='fulltd']{max-width:100%!important;width:100%!important;height:auto!important}@media screen and (max-device-width: 430px),screen and (max-width: 430px){td[class=emailcolsplit]{width:100%!important;float:left!important;padding-left:0!important;max-width:430px!important}td[class=emailcolsplit] img{margin-bottom:20px!important}} 
 
    </style> 
 
</head> 
 

 
<body style='width:100% !important; margin:0 !important; padding:0 !important; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; background-color:#FFFFFF;'> 
 
    <table border='0' cellpadding='0' align='center' cellspacing='0' id='backgroundTable' style='height:auto !important; margin:0; padding:0; width:100% !important; background-color:#333; color:#222222;'> 
 
    <tr> 
 
     <td> 
 
     <div id='tablewrap' align='center' style='width:100% !important; max-width:600px !important; text-align:center !important; margin-top:0 !important; margin-right: auto !important; margin-bottom:0 !important; margin-left: auto !important;'> 
 
      <table align='center' border='0' cellpadding='0' cellspacing='0' id='contenttable' style='background-color:#FFFFFF; text-align:center !important; margin-top:0 !important; margin-right: auto !important; margin-bottom:0 !important; margin-left: auto !important; border:none; width: 100% !important; max-width:600px !important;' 
 
      width='600'> 
 
      <tr> 
 
       <td width='100%'> 
 
       <table bgcolor='#FFFFFF' border='0' cellspacing='0' style='padding-right:25px' width='100%'> 
 
        <tr> 
 
        <td bgcolor='#FFFFFF' style='text-align:right;' width='100%'> 
 
         <a href='#'><img alt='Main banner image and link' border='0' src='http://placehold.it/72x100' style='display:inline-block; max-width:72px !important; width:100% !important; height:auto !important;'></a> 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       <table bgcolor='#FFFFFF' border='0' cellpadding='25' cellspacing='0' width='100%'> 
 
        <tr> 
 
        <td bgcolor='#FFFFFF' style='text-align:left;' width='100%'> 
 
         <p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px; padding:0; font-weight:normal;'> 
 
         Dear Customer, 
 
         </p> 
 
         <p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px;margin-left:20px; padding:0; font-weight:normal;'> 
 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
         in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
         </p> 
 
         <table border='0' cellpadding='0' cellspacing='0' class='emailwrapto100pc' width='100%'> 
 
         <tr> 
 
          <td align='right' class='emailcolsplit' valign='top' width='100%'> 
 
          <p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px; margin-left:20px; padding:0; font-weight:normal; text-align:left;'> 
 
           Please call us at 555-555-5555 with any questions. 
 
          </p> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td align='left' class='emailcolsplit' valign='top' width='58%'> 
 
          <address style='font-size:15px; margin: 0; line-height: 1.25em; font-family: Helvetica, Arial'> 
 
      <p> 
 
      <span style='font-weight:600; font-size: 18px'>Your Company Inc</span><br> 
 
      400 Tech Drive<br> 
 
      Some City, State 22222<br> 
 
      <abbr title='Phone'><strong>P:</strong></abbr>555.555.5555<br> 
 
      <strong>Email:</strong><a href='mailto:[email protected]'>[email protected]</a> 
 
      </p> 
 
      </address> 
 
          </td> 
 
         </tr> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

とても美しいですね。このフォーマットは私を狂ってしまう。私の電子メールは顧客に対する回答でしたが、他のシナリオにも簡単に適用できると確信しています。
幸運！

出典

2017-01-11 18:10:37

Good one、私のいくつかの短縮形のCSSを持っていたが、outlookとyahooの古いバージョンではボックスの影と境界の半径を除いてうまく動作する。 –

素晴らしい作品！これらの例では、私はクライアントにとって有用なものを作ることに自信を持っています。再度、感謝します！ – TBJ

メール本文の中にdivを配置するにはどうすればいいですか？

答えて

関連する問題