我正在创建一个Fluid html电子邮件。父表中有2个表。表的左侧比右侧的内容更多。仅在Outlook桌面中,右侧表格才会显示在底部。我蚂蚁右桌总是对齐到顶部。如果我在左侧的内容较少。它完美无缺。 以下是示例HTML代码:
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse;" >
<tr>
<td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="69%" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->
<table class="col535" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;max-width:535px;width:100%;border-right:1px solid #aaaaaa;">
<tr>
<td class="left_column_stack" valign="top" style="padding:0 20px 0 0;vertical-align:top;">
// Very Long Text (1500 lines)
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table width="25%" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="200" cellpadding="0" cellspacing="0" border="0" align="left" style="border-collapse:collapse;max-width:200px;width:100%;">
<tr>
<td class="right_column" valign="top" style="padding:0 0 0 20px;" >
// Small Text (250 lines)
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
JS小提琴:http://jsfiddle.net/NrERK/
注意:它只表现奇怪的Outlook桌面。在其他地方它的工作好。 请提供任何解决方案。
答案 0 :(得分:0)
在制作HTML电子邮件时,如果您使用'px'值而不是'%'值,那将是一件好事。
我已将主表的宽度从100%更改为700px
这是一个jsfiddle link!
<table border="0" cellspacing="0" cellpadding="0" width="700" style="border-collapse: collapse;" >
<tr>
<td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="69%" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->
<table class="col535" cellpadding="0" cellspacing="0" align="left" style="float:left;border-collapse:collapse;max-width:500px;width:100%;border-right:1px solid #aaaaaa;">
<tr>
<td class="left_column_stack" valign="top" style="padding:0 20px 0 0;vertical-align:top;">
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table width="25%" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="200" cellpadding="0" cellspacing="0" border="0" align="left" style="float:left;border-collapse:collapse;max-width:200px;width:100%;">
<tr>
<td class="right_column" valign="top" style="padding:0 0 0 20px;" >
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
Left Side <br>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
答案 1 :(得分:0)