如何將div放在郵件正文中彼此相鄰？

我花了幾個小時試圖創建一個可以非常有效的電子郵件模板。我正試圖在確認電子郵件的正文中將DIV排列在彼此的旁邊，該郵件將從我的網站發送。因此，在所得的電子郵件我有這樣的：如何將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>

正如你可以看到我在這裏嘗試使用float:left，但我已經在容器（.view-content）使用display:table也嘗試過，並display:table-row而在其他的DIV display:table-cell分別。我試過的其他東西是使用display:block和display:inline-block ...沒有運氣。那麼我在這裏做錯了什麼？爲什麼上面類視圖字段的DIVS拒絕將自己放在一起？我有些理由不能使用簡單的表格，這裏有點冗長的解釋。

UPD：好了，我終於不得不放棄這個和使用，因爲對於DIV在流行的電子郵件客戶端如Outlook 2013的定位缺乏支持一個簡單的表格的方式...

來源

2017-01-11 TBJ

小提琴或一些css代碼可能有助於瞭解更多:) – semuzaboi

製作HTML電子郵件模板時，您需要使用表格而不是divs。請參閱本教程：https：//webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770 –

是的，我現在看到，在Outlook 2010中不支持div定位/ 13等等......我將不得不重新思考我的方法。無論如何感謝:-)。 – TBJ

任何選項應該只是考慮爲創建Mailers時的表標籤。甚至SendGrid發送使用表標籤編碼的郵件。

我更喜歡兩個創建兩個具有不同或相同寬度的DIV，導致總共600px。然後，應用最大寬度以使兩個DIV都可堆疊在移動設備上。

<!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

好的，我的CSS有一些速記，但在outlook和yahoo舊版本中除了box陰影和邊框半徑之外工作正常。 –

偉大的工作！通過這些例子，我有信心爲客戶創造一些有用的東西。再次感謝！ – TBJ

如何將div放在郵件正文中彼此相鄰？

回答

相關問題