html 전자 메일 : 기본 레이아웃을 구현하는 방법

-1

나는 html 전자 메일 서식 파일의 기본 레이아웃을 디자인하려고합니다. 내가 본 대부분의 예제에서는 주 래퍼 테이블을 사용합니다. 내가 대신 쓴 : 당신이 볼 수있는html 전자 메일 : 기본 레이아웃을 구현하는 방법

<body> 
<center> 
    <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center"> 
    <tr> 
     <td> 
     <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center"> 
      <tr> 
      <td> 
       <img src="banner.jpg" alt="" style="width:100%;max-width:600px;height:auto" width="600" /> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
    <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center"> 
    <tr> 
     <td width="50%"> 
     <table align="center"> 
      <tr> 
      <td> 
       <p>content</p> 
      </td> 
      </tr> 
     </table> 
     </td> 
     <td width="50%"> 
     <table align="center"> 
      <tr> 
      <td style="text-align:center"> 
       <p>content</p> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 


    </table> 
</center>

는, 이미지 배너, 주먹 테이블이하고, 대신 두 번째 행, 또 다른 별도의 테이블이 있습니다. 접근 방식이 맞습니까? 나는 섹션 태그를 사용하여 웹 사이트를 분리하는 것을 의도했다.

출처

2017-09-25 Lime In The Coconut

''제 제안은'width : 100 %;'를 꺼내는 것입니다. 'width = "600"'은 Outlook의 경우 잘되어야합니다. 'max-width : 600px;는 600보다 넓은 것을 선언하지 않는 반면, 어떤 이메일 클라이언트는 항상 원하는 효과가있는 것은 아니지만 윈도우의 100 %로 확장 될 것입니다. – gwally

당신에게 맞는 답변이 있습니까? – Syfer

나는 당신의 코드를 가져 와서 약간의 변경을 가하고 @gwally가 제안한 것에 추가했습니다. 아래 코드는 미디어 쿼리를 지원하는 모든 기기 (Gmail 앱 포함)에서 작동합니다. 코드 작동 방식을 보려면 회전 코드 (실행 코드, 전체 화면으로 이동 한 다음 브라우저 크기 조정)를 지정하십시오.

작은 장치를 대상으로 지정하려는 경우 미디어 쿼리를 480px로 변경할 수 있습니다.

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Lime in the coconut</title> 
 
\t <style type="text/css"> 
 
\t \t .container{width:600px;} 
 
\t \t @media only screen and (max-width:601px) { 
 
\t \t \t .container{width:100% !important;} 
 
\t \t \t .banner img{width:100% !important; height:auto !important;} 
 
\t \t } 
 
\t </style> 
 
</head> 
 

 
<body> 
 
<center> 
 
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto"> 
 
    <tr> 
 
     <td> 
 
     <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:600px;margin: 0 auto"> 
 
      <tr> 
 
      <td class="banner"> 
 
       <img src="https://i.stack.imgur.com/AKVzJ.png" alt="" style="max-width:600px;height:auto" width="600" /> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto"> 
 
    <tr> 
 
     <td width="50%"> 
 
     <table border="0" align="center" cellpadding="5" cellspacing="0"> 
 
      <tr> 
 
      <td> 
 
       <p>content</p> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
     <td width="50%"> 
 
     <table border="0" align="center" cellpadding="5" cellspacing="0"> 
 
      <tr> 
 
      <td style="text-align:center"> 
 
       <p>content</p> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 

 

 
    </table> 
 
</center>

나를 어떻게 생각하는지 알려주십시오.

출처

2017-09-25 23:42:18 Syfer

예, 완전히 실행 가능한 접근 방식입니다.

출처

2017-09-25 19:13:01 Amorandron

html 전자 메일 : 기본 레이아웃을 구현하는 방법

답변

관련 문제