1

我正在尝试开发 HTML 时事通讯,但我遇到了对齐问题。我有两个相邻的单元格(“week”和“03/2013”​​,字体大小不同,它们应该与底部对齐。在浏览器中呈现良好的标准解决方案在 Outlook 2007 中呈现不佳。所以我使用了启发式百分比值来对齐单元格,这在 Outlook 中有效。但它在 iPhone/iPad 中不起作用也就不足为奇了。有人知道如何让它在两者上都起作用吗?

非常感谢这是我的代码

<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>
4

4 回答 4

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>
于 2013-06-14T13:21:16.670 回答
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>
于 2013-06-14T12:09:31.817 回答
0

问题的标题说“到基线”,但文本说“到底部”。而您实际上正在使用vertical-align: bottom.

我假设您想要基线对齐。然后您应该简单地设置vertical-align: baseline(并删除您可能添加的任何代码以尝试一些启发式 - 即猜测 - 调整以将底部对齐变为基线对齐)。

于 2013-06-14T08:03:04.073 回答
0

尝试将“周”的行高设置为日期的字体大小。(行高:22px;)

<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>

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


或者,如果您希望所有文本与底部对齐,则必须在其中设置 valign="bottom"

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

这里:http: //jsbin.com/ipafoh/1/

于 2013-06-14T07:50:39.433 回答