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画像の上部とテキストの先頭の間に空の行が表示されるという問題が発生しました。ラップされたテキストにより、リンクされた画像でこの問題が発生しました。
画像自体を独自の単一セルテーブル内に実験的にネストし、それを左側に配置することで、1つの石で2羽の鳥を殺すことができました（残念ながら、余分なHTMLがたくさんあります）。また、コンテナのdivパディング/ボーダースタイルの一部を新しいコンテナに移動しましたtable：
これにより、包含テーブルがコピーの右側にスペースを追加できなくなり、画像の包含tdパディングスタイル（緑）を使用して、画像の周囲に必要なクリアスペースを確保できるようになりました。HTMLではなく元の画像にスペースを追加するのが最もクリーンなことは認めますが、これは動的に生成された電子メールであり、親のWebサイトと画像を共有するため、この場合はオプションではありませんでした。
@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>