【发布时间】：2013-01-08 21:28:24
【问题描述】：
我正在尝试升级我的 HTML 电子邮件，以便每篇文章中的图像允许以下段落的文本环绕它。我读到在align="left" 表中包含这样的图像是最好的，而不是将该属性放在暴露的img 元素上。
我已经让它适用于所有非 Outlook 电子邮件客户端，但只要将 align="left" 属性添加到图像的表格容器中，div 就会同时包含对齐的表格和包装的文本 (单个 p 元素）呈现时没有边框 - 但仅在对齐的表格似乎与之相邻的地方（左侧和上方是缺少边框的部分）。
这很奇怪。正如您在 Outlook 之前/之后看到的那样，当表格未左对齐时，容器 div 上的边框样式呈现良好。
我能做些什么来阻止对齐的表格破坏容器 div 的边框样式吗？我希望避免将 HTML 扩展到更多表格或使用图像分隔符；如果不是因为这个晦涩难懂的问题，我的div css 正如你所见，它在 Outlook 中运行良好。
所需内容的屏幕截图以及 Apple Mail 中呈现的代码外观，例如（添加黄色表格背景颜色以强调和表示 td 填充）：
Outlook '07 之前将align="left" 属性添加到表中：
Outlook '07 之后将align="left" 属性添加到表中：
事不宜迟，XHTML 1.0 严格代码*：
<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 标记，因此我遇到了在图像顶部和开头之间出现空行的问题text - 任何包含包装文本的块元素都会导致链接图像出现此问题：
通过实验性地将图像本身嵌套在它自己的单单元格表中并将那个也对齐到左侧，我能够用一块石头杀死两只鸟（以及大量额外的 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>
【问题讨论】：
标签： css html-table html-email outlook-2007