2013-06-14 2 views
1

HTML 뉴스 레터를 개발하려고하고 있으며 정렬에 문제가 있습니다. 두 개의 인접한 셀 ("주"와 "03/2013"이 서로 다른 글꼴 크기로되어 있으며 아래쪽에 정렬해야합니다.) 브라우저에서 잘 렌더링되는 표준 솔루션은 Outlook 2007에서 잘 렌더링되지 않습니다. 휴리스틱 값을 셀 정렬에 사용하면 Outlook에서 작동하지만 iPhone/iPad에서 작동하지 않는 것은 놀랍지 않습니다. 둘 모두에서 작동하도록하는 방법을 아는 사람이 있습니까?HTML 뉴스 레터 - 인접한 셀을 다른 글꼴 크기로 정렬하여 하단까지

감사합니다. 여기에 있습니다. 코드

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<!--[if gte mso 9]> 
<style _tmplitem="50" > 
.article-content ol, .article-content ul { 
margin: 0 0 0 24px; 
padding: 0; 
list-style-position: inside; 
} 
</style> 
<![endif]--> 
<style type="text/css"> 
@media screen and (max-width: 610px) { 
a[class=fabsize]{text-decoration:none;color:#00FF00} 
} 

.l-footer a { 
color: #b2b2b2 !important; text-decoration: underline; 
} 
.l-footer a:link { 
color: #b2b2b2 !important; text-decoration: underline; 
} 
.l-footer a:visited { 
color: #b2b2b2; text-decoration: underline; 
} 
.l-footer a:hover { 
color: #b2b2b2; text-decoration: underline; 
} 
.l-footer a:active { 
color: #b2b2b2;text-decoration: underline; 
} 

</style> 
</head> 
<body> 
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;"> 
<tbody style="margin: 0px; padding: 0px; border: 0px;"> 
<tr> 
<td align="center" bgcolor="#FFFFFF" style="color: #6f6f6f; border: #6f6f6f;"> 
<!-- block preamble starts --> 
<table class="l-preamble" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;"> 
<tbody style="margin: 0px; padding: 0px; border: 0px;"> 
<tr> 
<td class="has-border-bottom-1" height="16" width="600" style="color: #6f6f6f; border-bottom: 1px solid #6f6f6f;"></td> 
</tr> 
<!-- element preamble-info ends --> 
<!-- element preamble-year starts --> 
<tr> 
<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;"> 
<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;"> 
<tbody style="margin: 0px; padding: 0px; border: 0px;"> 
<tr> 
<td class="w480 normal-text" height="29" width="474" border="1" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td> 
<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold; border: #6f6f6f; font-size: 12px; line-height: 115%;" valign="bottom">WEEK</td> 
<td width="91" height="29" class="header" style="vertical-align: bottom; text-align: right; letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold; border: #6f6f6f;" align="right" valign="bottom">03/2013</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

답변

0

이 하나를 시도해보십시오. 기본적으로이 텍스트를 두 개가 아닌 같은 셀에 넣습니다.

<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left;"> 
    <tr> 
     <td height="29" width="474" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td> 
     <td align="right" height="29" width="126" style="color: #6f6f6f; font-weight: bold; font-size: 12px; line-height: 115%;">WEEK &nbsp;<span style="letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold;">03/2013</span></td> 
</tr> 
</table> 
+0

매력처럼 작동합니다! 고마워. – Fabbio

0

는 "주"의 설정 라인 높이를 시도 일로부터 크기 글꼴 (라인 - 높이 : 22 픽셀을)

<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold; border: #6f6f6f; font-size: 12px; line-height: 22px;" valign="bottom">WEEK</td> 
,617. 여기

: http://jsbin.com/anejax/1/


또는 u는 u는 여기

<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;" valign="bottom"> 

에 vAlign와 = "바닥"을 설정해야합니다 아래로 정렬 된 모든 텍스트하려는 경우 : http://jsbin.com/ipafoh/1/

+0

답장을 보내 주셔서 감사합니다.하지만 솔루션이 MS Outlook 2007과 iPhone에서는 올바르게 표시되지 않습니다. IE로 링크를 연 다음 파일 -> 이메일로 보내기를 클릭하십시오. 주 텍스트를받은 이메일은 2 또는 3 픽셀로 너무 낮습니다.) – Fabbio

0

의 제목을 질문은 "기준선까지"라고 말하지만 텍스트는 "하단으로"라고 말합니다. 그리고 실제로는 vertical-align: bottom을 사용하고 있습니다.

기준 정렬을 원한다고 가정합니다. 그런 다음 간단히 vertical-align: baseline을 설정하고 추측을 시도하기 위해 추가 한 코드를 제거해야합니다 (예 : 추측 작업 - 하단 정렬을 기준 정렬로 변경).

+0

답장을 보내 주셔서 감사합니다! 당신 말이 맞아요, 나는 조건을 혼란스럽게 만들었습니다. 어쨌든, MS Outlook 2007에서도 테이블이 올바르게 표시되지 않습니다 (Internet Explorer를 사용하여 링크를 열어 본 다음 파일 -> 전자 메일로 보내기를 클릭하십시오.) 전자 메일에서받는 주 텍스트는 2-3 픽셀입니다. 낮은). – Fabbio

0

전자 메일에서는 항상 html valign = "bottom"을 사용하여 테이블 셀의 맨 아래에 아무 것도 정렬하지 않습니다.

예 :

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td height="100" width="300" valign="bottom" style="font-size:12px;" bgcolor="#959595"> 
     cell 1 
    </td> 
    <td height="100" width="300" valign="bottom" style="font-size:18px;" bgcolor="#858585"> 
     cell 2 
    </td> 
    </tr> 
</table>