我正在尝试升级我的 HTML 电子邮件，以便每篇文章中的图像允许以下段落的文本环绕它。我读到最好在表格中包含这样的图像align="left"，而不是将该属性放在暴露的img元素上。
我已经让它适用于所有非 Outlook 电子邮件客户端，但是一旦将该align="left"属性添加到图像的表格容器中div，包含对齐表格和包装文本（单个p元素）的属性就会呈现为没有边框-但仅在对齐的表格似乎与之相邻的地方（左侧和上方缺少边框部分）。
这很奇怪。正如您在 Outlook 之前/之后看到的那样，div当表格未左对齐时，容器上的边框样式呈现良好。
我可以做些什么来阻止对齐的表格杀死容器 div 的边框样式？我希望避免将 HTML 扩展到更多表格或使用图像分隔符；如果不是因为这个晦涩的问题，我的divCSS 如您所见，它在 Outlook 中运行良好。
例如，所需内容的屏幕截图以及在 Apple Mail 中呈现的代码外观（添加黄色表格背景颜色以强调和表示td填充）：
将属性添加到表之前的Outlook '07 ：align="left"
将属性添加到表后的Outlook '07 ：align="left"
不用多说，XHTML 1.0 Strict 代码*：
<div class="content" style="border-left-width: 8px; border-left-style: solid; border-top: 1px dotted #bababa; padding-left: 17px; padding-bottom: 15px; padding-top:25px; border-left-color: #0c63b8;">
<table bgcolor="yellow" width="160" cellpadding="0" cellspacing="0">
<tr>
<td width="160" style="padding-right: 20px; padding-bottom: 20px;">
<a href="#"><img src="http://www.eastendhouse.org/sites/default/files/imagecache/eNews-small-160/images/news/IMG_1547.JPG" alt="" title="" width="160" height="120" border="0" style="vertical-align: bottom;" /></a>
</td>
</tr>
</table>
<p style="margin: 0; padding: 0; margin-bottom: 13px; margin-top: 0px !important;">Et quinta decima eodem modo, typi qui nunc nobis videntur parum clari fiant sollemnes in. Quam littera gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta decima. Tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. Typi non habent claritatem insitam est, usus legentis in iis. Sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Claritatem Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius! Eu feugiat nulla, facilisis at vero eros et accumsan et iusto odio. Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi nam liber assum qui.</p>
</div>
- 此代码不包含<h2>元素上方的div.content元素，但如果有帮助，我可以稍后包含。
扩展解决方案
在被@john 引导下将文本放入与左对齐图像相同的表格单元格中之后，我描述的包含的奇怪问题div消失了，并且文本正确包装：
请注意，尽管新的包含表在右侧添加了奇数空间（表右侧虚线顶部边框下的白色列），但我无法使用此解决方案进行更正。
此外，由于接受的答案不包括图像周围的链接或p包含包装文本的标签，我遇到了一个问题，即在图像顶部和文本开头之间出现一个空行 - 任何包含的块元素包装的文本导致链接图像出现此问题：
通过实验性地将图像本身嵌套在它自己的单单元格表中并将其对齐到左侧，我能够用一块石头杀死两只鸟（不幸的是，还有很多额外的 HTML）。我还将一些容器div填充/边框样式移动到新的包含table：
这阻止了包含表在副本右侧添加空间，并允许我使用图像的包含td填充样式（绿色）来为我提供图像周围所需的清晰空间。我承认在原始图像中而不是在 HTML 中添加空间是最干净的，但由于这是一个动态生成的电子邮件，它与它的父网站共享图像，在这种情况下这不是一个选项。
这是在@john 的帮助下的最终工作代码：
<div class="content" style="border-left-width: 8px; border-left-style:solid; padding-bottom: 15px; border-left-color: #0c63b8;">
<table width="392" border="0" cellpadding="0" cellspacing="0" bgcolor="yellow" style="border-top: 1px dotted #bababa;">
<tr>
<td width="392" style="padding-top: 25px; padding-left: 17px;">
<table align="left" cellpadding="0" cellspacing="0" border="0" bgcolor="green">
<tr>
<td style="padding-right: 20px; padding-bottom: 10px;">
<a href="#"><img style="margin: 0; border: 0; padding: 0; display: block;" align="left" src="http://www.eastendhouse.org/sites/default/files/imagecache/eNews-small-160/images/news/IMG_1547.JPG" alt="" title="" width="160" height="120" /></a>
</td>
</tr>
</table>
<p style="margin: 0; padding: 0; margin-bottom: 13px; margin-top: 0px !important;">Lorem ipsum dolor sit amet consectetuer Vestibulum felis tristique morbi eget. Vel leo felis id egestas Vestibulum Fusce lobortis enim netus rutrum. Urna Aliquam dis consequat neque orci leo pellentesque semper leo accumsan. Est lacus Vestibulum rutrum id libero dui consequat ligula interdum Maecenas. In molestie risus iaculis libero turpis faucibus ipsum tincidunt In enim. Consectetuer Donec at tellus mus Pellentesque wisi vitae Maecenas augue tellus. Integer.</p>
</td>
</tr>
</table>
</div>