이메일 관련 문제 섹션 Outlook 문제

고객을위한 3 일간의 뉴스 레터를 작성한 후 문제가 발생했습니다. 왼쪽에 하나의 이미지가 있고 오른쪽에 텍스트가있는 섹션을 만들었습니다. This is what it looks like 이메일 관련 문제 섹션 Outlook 문제

그리고 이것은 코드입니다 :

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

그것은 넥서스 5 는 전망에 terrible (모든 버전, 데스크탑 및을의 제외하고 모든 휴대 전화에 좋아 보인다 웹)

Outlook과 Nexus 5에서이 문제를 해결하는 방법을 아는 사람이 있습니까?

좀 더 정보 :

폭 600 픽셀이어야합니다.
이미지는 왼쪽에, 텍스트는 오른쪽에 있어야합니다.

감사합니다. 당신이, 당신이 많은 문제가 거라고하지 않을 경우/웹 메일 등 사실, 이메일 전송의 대부분은 600PX해야

출처

2017-09-25 Senn Friesen

먼저, 뉴스 레터, 많은 장치에, <table>, <tr> 및 <td> 사용 그 너비를 사용하는 몇 가지 문제를 피할 수 있습니다.

둘째, 클래스를 사용하지 않는, 선호하는 순수 인라인 CSS와 같은 : style="font-size:16px;"

셋째, 내 생각에, 당신은 리트머스와 EmailOnAcid 웹 사이트와 포럼 (물론 유래)을 확인해야하고, 어쩌면 당신은 시도해야 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

이메일 관련 문제 섹션 Outlook 문제

답변

관련 문제