HTML 전자 메일에서 이미지를 플로팅하는 방법

Question

다음 전자 메일을 보내고 웹 페이지를 만드는 데 사용하는 HTML을 가지고 있습니다.

<div> 
    <a name="id-23"></a> 
    <h2>Free Legal Defense Services for Lester et al</h2> 
    <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3"> 
     <p><img src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" style="margin:5px;float:left;vertical-align:auto" /> 
     Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
     </p> 
    </div> 
    </span> 
</div> 

웹 페이지는 내가 좋아하는 것처럼 텍스트를 래핑하지만 이메일은하지 않습니다

가 어떻게 제대로 포장 할 텍스트를받을 수 있나요? 사용자 정의 HTML 이메일과 더러운 정말 내려하고 싶은 경우

가

당신의 CSS의 99 % 늘 당신이 테이블을 사용 붙어있어 그래서

작업이 wonderful article about HTML Email에 따르면

Answer 1

... . 메일 침팬지는 기지로 시작하는 것이 좋습니다 것이 무료 HTML 이메일 템플릿을 잔뜩 가지고 ... 테이블은 괴물 엉덩이에 통증이 있습니다.

Answer 2

당신은 tds의 테이블 행 너비 2를 사용할 수 있습니다! 대신

"플로트 : 바로"단순히 열을 만들고이

    <table cellpadding="0" cellspacing="0" width="100%"> 
         <tr> 
          <td > 
           your text Here     
          </td> 
          <td> 
           <div class="text"> 
            <img src="###" alt="" border="0" /> 
           </div> 
          </td> 
         </tr> 
        </table> 

Answer 3

이 콘텐츠와 별도의 테이블 셀에 이미지를 배치하려고 -이 이미지 주위에 텍스트를 줄 바꿈되지 않습니다. 더 이상 사용되지 않는 속성 align = "left"을 사용하면 이미지가 왼쪽으로 떠 다니고 텍스트가 그 주위를 감싸는 사이트와 유사하게 동작하도록 이메일을 얻을 수 있습니다.

그러나 Outlook에서는 여백 속성도 무시되며 텍스트는 이미지와 대조됩니다. 이 문제를 해결하려면 hspace = "5" (왼쪽 및 오른쪽으로 간격 5px 추가) 및 vspace = "5" (위쪽과 아래쪽에 5px 간격을 추가) 구형 속성을 사용하십시오.

불행히도 이러한 속성을 사용하여 오른쪽 및 아래쪽 만 타겟팅 할 방법이 없으므로 이미지 주위에 간격이 생길 수 있습니다. 당신이 그걸로 괜찮지 않다면 은 에 공백이 있고, 오른쪽과 아래에만 공백이 있어야합니다. 그런 다음 그 공백을 이미지 자체에 추가하는 것이 좋습니다. 그렇지 않으면, 더 복잡한 접근법을 계속 읽으십시오.

hspace 및 vspace를 사용하거나 이미지에 공백을 추가하는 경우 인라인 스타일 속성에서 여백 속성을 생략하거나 (0으로 설정하는 것이 좋습니다. 이 아닌 이메일 클라이언트는을 무시합니다.

더 복잡한 방법

<div> 
    <a name="id-23"></a> 
    <h2>Free Legal Defense Services for Lester et al</h2> 
    <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3"> 
     <p><img src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" align="left" hspace="5" vspace="5" style="float:left;" /> 
     Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
     </p> 
    </div> 
    </span> 
</div> 

:

사용되지 않는 속성 "정렬은"화상과 테이블에 작동하기 때문에, 우리는 대신 그을 테이블로 하나의 이미지를 넣어 떠거야 . 그런 다음 이미지를 담고있는 단일 테이블 셀 요소에 패딩을 적용하십시오.

<div> 
    <a name="id-23"></a> 
    <h2>Free Legal Defense Services for Lester et al</h2> 
    <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3"> 
     <!--[if mso]> 
     <table align="left" border="0" cellpadding="0" cellspacing="0" width="130" height="60"> 
     <tr> 
      <td style="padding: 0 5px 5px 0;"> 
      <![endif]--> 
       <img align="left" width="125" height="53" style="float: left; width: 125px; height: 53px; margin: 0 5px 5px 0;" src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" /> 
      <!--[if mso]> 
      </td> 
     </tr> 
     </table> 
     <![endif]--> 
     <p> 
     Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
     </p> 
    </div> 
    </span> 
</div> 

출처 :

• Floating Images and Tables in Outlook
• Margins and Padding around Images in Outlook