響應式電子郵件部分展望問題

爲客戶製作新聞稿3天后，我遇到了問題。我製作了一個部分，左側是一張圖片，右側是一些文字。 This is what it looks like 響應式電子郵件部分展望問題

這是代碼：

<div class="column narrow" style="text-align: left; color: 
     #430861; font-size: 16px; line-height: 24px; font-family: Open 
     Sans,sans-serif; Float: left; max-width: 320px; min-width: 200px; width: 
     320px; width: calc(72200px - 12000%)"> 

     <div style="font-size: 12px; font-style: normal; font-weight: 
     normal" align="center"> 
      <img class="gnd-corner-image gnd-corner-image-center 
     gnd-corner-image-top gnd-corner-image-bottom" style="border: 0; display: 
     block; height: auto; width: 100%; max-width: 397px" width="200" 
       src="http://i1.cmail20.com/ei/j/66/2D8/3C7/174211/temp_import/csfinal/AfbeeldingenVCCmailing-05.jpg"> 
     </div> 

    </div> 

    <div class="column wide" style="text-align: left; color: 
     #430861; font-size: 16px; line-height: 24px; font-family: Open 
     Sans,sans-serif; Float: left; max-width: 400px; min-width: 320px; width: 
     320px; width: calc(8000% - 47600px)"> 

     <div style="Margin-left: 20px; Margin-right: 20px; 
     Margin-top: 12px"> 
      <div style="line-height: 4px; font-size: 1px">&nbsp;</div> 
     </div> 

     <div style="Margin-left: 20px; Margin-right: 20px; 
     Margin-bottom: 12px"> 
      <h2 class="size-16" style="Margin-top: 0; Margin-bottom: 0; 
     font-style: normal; font-weight: normal; color: #430861; font-size: 
     16px; line-height: 24px" lang="x-size-16"><span style="color: 
     #ffffff"><strong>WE ARE ARRIVING SOON!</strong><br> 
     Lashing + Securing will be fully available in<br> 
     Q4&nbsp;2017</span></h2> 
     </div> 


    </div> 
</div>

它看起來每一部手機上佳，除了在Nexus 5和它在展望terrible（所有版本，臺式機和網頁）

有誰知道如何解決這個Outlook和Nexus 5？

一些更多信息：

寬度必須600px的。
圖片應位於左側，文字位於右側。

我非常感謝您的幫助。

來源

2017-09-25 Senn Friesen

首先，新聞郵件，使用<table>，<tr>和<td>，如果你不這樣做，你將有很多問題，在許多設備/網絡郵件等。事實上，大部分的收發郵件的必須是600px的，你會避免使用這個寬度的一些問題。

其次，不要使用類，喜歡純粹的內聯CSS這樣的：style="font-size:16px;"

三，在我看來，你應該檢查石蕊和EmailOnAcid網站和論壇（當然＃1），也許你應該嘗試EmailOnAcid郵件測試工具。我在我的公司得到它，這非常有用！

最後，這裏是你可以使用一個代碼（很短的）例子，它是一個模板，我用的一部分：https://jsfiddle.net/6tq8ufdr/

<table bgcolor="#fff" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;"> 
    <tbody> 
     <tr> 
      <td align="center" bgcolor="#ebf9ff"> 
       <table cellpadding="0" cellspacing="0" border="0"> 
        <tbody>          
         <tr bgcolor="#ffffff"> 
          <td height="200" width="600"> 
           <table cellpadding="0" cellspacing="0" border="0"> 
            <tbody> 
             <tr> 
              <td height="200" width="200" valign="middle" align="center" style="height:200px;"> 
               <img style="display:block;" src="http://del.h-cdn.co/assets/cm/15/10/54f682bbc4bc5_-_cooked-bacon-de-cp.jpg" alt="bacon"/> 
              </td> 
              <td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too) 
              <td height="200" width="370" valign="middle" align="left" style="height:200px;">       <p>Ut sagittis nulla at arcu pretium maximus. Morbi ut turpis tincidunt, scelerisque massa eget, rutrum lectus. Aenean sed ullamcorper leo. Quisque lacus dolor, tristique id mollis pellentesque, tempus ut augue. Cras mauris ipsum, molestie sit amet eros vel, tempus rutrum odio. Pellentesque consectetur quam non nisl vulputate euismod. Integer quis magna nec urna malesuada efficitur.</p> 
              </td> 
              <td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too) 
             </tr> 
            </tbody> 
           </table> 
          </td> 
         </tr>                       
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table>

不要忘了<head>等

來源

2017-09-25 14:05:29 Chaaampy

響應式電子郵件部分展望問題

回答

相關問題