2017-03-31 11 views
1

템플릿 디자인을 이메일로 보내는 것이 새로운데 내 이메일 템플릿에 왜 이런 일이 발생하는지 궁금합니다. 첫 번째 스크린 샷은 내가 기대하는 것이며 다른 것들은 각각 gmail, yahoo 및 Outlook에서 렌더링 된 것입니다. 내 관심사는 로고가 예상대로 올바르게 정렬되지 않는 이유입니다. 또한 로고를 보여주는 해당 코드를 첨부했습니다.이미지가 Gmail, Outlook 및 Yahoo 메일 오른쪽에 정렬되어 있지 않음

Expectedenter image description hereenter image description hereenter image description here

<tr> 
 
\t <td align="center" valign="top"> 
 
\t <!-- CENTERING TABLE // --> 
 
\t <!-- 
 
\t The centering table keeps the content 
 
\t tables centered in the emailBody table, 
 
\t in case its width is set to 100%. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1"> 
 
\t <tr> 
 
\t <td align="center" valign="top"> 
 
\t <!-- FLEXIBLE CONTAINER // --> 
 
\t <!-- 
 
\t The flexible container has a set width 
 
\t that gets overridden by the media query. 
 
\t Most content tables within can then be 
 
\t given 100% widths. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer"> 
 
\t <tr> 
 
\t <td align="center" valign="top" width="600" class="flexibleContainerCell"> 
 

 
\t <!-- CONTENT TABLE // --> 
 
\t <!-- 
 
\t The content table is the first element 
 
\t that's entirely separate from the structural 
 
\t framework of the email. 
 
\t --> 
 
\t <table border="0" cellpadding="30" cellspacing="0" width="100%"> 
 
\t <tr> 
 
\t <td align="center" valign="top" class="textContent"> 
 
\t <img align="right" alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /><br /><br /> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CONTENT TABLE --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // FLEXIBLE CONTAINER --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CENTERING TABLE --> 
 
\t </td> 
 
</tr>

답변

0

당신은 TD의 로고를 잘 정렬하도록되어 테이블에서와 같이 우측 정렬 될 필요가있는에 정렬 센터가 많이 있습니다.

추가 테이블을 추가하고 로고와 동일한 크기로 만들고 올바르게 정렬했습니다.

\t <tr> 
 
\t <td align="right" valign="top"> 
 
\t <!-- CENTERING TABLE // --> 
 
\t <!-- 
 
\t The centering table keeps the content 
 
\t tables centered in the emailBody table, 
 
\t in case its width is set to 100%. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1"> 
 
\t <tr> 
 
\t <td align="right" valign="top"> 
 
\t <!-- FLEXIBLE CONTAINER // --> 
 
\t <!-- 
 
\t The flexible container has a set width 
 
\t that gets overridden by the media query. 
 
\t Most content tables within can then be 
 
\t given 100% widths. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer"> 
 
\t <tr> 
 
\t <td align="right" valign="top" width="600" class="flexibleContainerCell"> 
 

 
\t <!-- CONTENT TABLE // --> 
 
\t <!-- 
 
\t The content table is the first element 
 
\t that's entirely separate from the structural 
 
\t framework of the email. 
 
\t --> 
 
\t <table border="0" cellpadding="30" cellspacing="0" width="100%"> 
 
\t <tr> 
 
\t <td align="right" valign="top" class="textContent"> 
 

 
\t <table width="152" border="0" align="right" cellpadding="0" cellspacing="0" style="width:100%; max-width: 152px;"> 
 
\t <tbody> 
 
\t <tr> 
 
\t <td align="right"><img alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /></td> 
 
\t </tr> 
 
\t </tbody> 
 
\t </table> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CONTENT TABLE --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // FLEXIBLE CONTAINER --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CENTERING TABLE --> 
 
\t </td> 
 
\t </tr>

이 그것을 해결되는지 알려주세요. 이렇게해도 문제가 해결되지 않으면 템플릿보다 디자인이 더 복잡 해지는 충돌하는 클래스 나 ID가 있는지 확인하기 위해 더 많은 코드가 필요합니다.

하이브리드 또는 응답 성 전자 메일의이 부분입니까?

건배

+0

감사합니다. 불행히도, 코드는 스택 오버플로에서 허용되는 것보다 오래입니다. 이메일을 보내 주시면 zip 파일로 전체 HTML 소스를 보내 드리겠습니다. – user2721794

+0

Syfer.darknight at Gmail – Syfer

+0

안녕하세요 Syfer, 감사합니다. 나는 당신의 메일에 그것을 보냈습니다. – user2721794