반응 형 HTML 전자 메일에 대한 스태킹 테이블

이 이메일에 처음 오 셨지만 며칠 동안 수색 및 검색했지만 여전히이 이메일을 해독 할 수 없습니다. 아래 그림과 같이 창을 축소 할 때 두 이미지를 겹쳐서 오렌지색으로 바꾸기를 원합니다. 나는 테이블이 중첩되어있는 방식으로 뭔가를 느낀다.반응 형 HTML 전자 메일에 대한 스태킹 테이블

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <head> 
     <style type="text/css"> 
      @media screen and (max-width: 400px) { 
       .content { 
        background-color: #DF6618; 
        width: 100% !important; 
        height: auto !important; 
       } 

       .contentSmall { 
        width: 100%; 
        height: auto; 
       } 
      } 
     </style> 
    </head> 

     <table width="600px" class="content"> 
      <tr> 
       <td> 
        <table width="300px" class="contentSmall"> 
         <tr> 
          <img src="http://2.bp.blogspot.com/_FkAI_ee_eBA/SASnSymg3fI/AAAAAAAAAIA/E6UODcxSoTY/s400/300px-Helix_nebula.jpg"; width="300"; border="1px";/> 
         </tr> 
        </table> 
       </td> 

       <td> 
        <table width="300px" class="contentSmall"> 
         <tr> 
          <img src="http://2.bp.blogspot.com/_FkAI_ee_eBA/SASnSymg3fI/AAAAAAAAAIA/E6UODcxSoTY/s400/300px-Helix_nebula.jpg"; width="300"; border="1px";/> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

출처

2014-12-30 Mikhail Abramov

우선 HTML 의미 체계를 살펴 보겠습니다. 이미지는 테이블 형식의 데이터가 아니므로 테이블 내부에서 사용하면 안됩니다. 부트 스트랩을보고 자신의 미디어 쿼리를 사용하여 필요한 추가 규칙을 제공하는 것이 좋습니다. – msfoster

나는 분명히 이메일을위한 부트 스트랩을 사용하지 않을 것이다. – itamar

"이 이메일에 익숙하지 않으므로"다른 클라이언트가 HTML 이메일에서 지원하는 기능을 보여주는 [이 차트] (https://www.campaignmonitor.com/css/)를 확인합니다. 예를 들어, 모든 스타일은 ''섹션에 있기 때문에 Gmail에서 누크됩니다. – regdoug

변경 테이블 요소과 같이, 블록 속성을 표시 :

 @media screen and (max-width: 400px) { 
      .content { 
       background-color: #DF6618; 
       width: 100% !important; 
       height: auto !important; 
      } 
      table, tbody, tr, th, td { 
       display: block 
      } 
      .contentSmall { 
       width: 100%; 
       height: auto; 
      } 
     }

당신은 또한 반응 이메일 프레임 워크 Zurb Ink에서 살펴 보는 시도 할 수 있습니다. 여기에 templates도 있습니다. 수정을 시도 할 수도 있습니다.

출처

2014-12-30 23:20:41

바로 그거야! 고마워요 딜란. –

반응 형 HTML 전자 메일에 대한 스태킹 테이블

답변

관련 문제