适用于 Outlook.exe 的电子邮件的稳健两列 HTML 布局，如何在没有表格的情况下使用？

Question

目前，我们使用电子邮件软件中的表格创建如下所示的两列布局，在实际电子邮件文本的左侧显示讨论参与者的头像，类似于论坛讨论：

在不使用表格的情况下实现类似的两列布局的简单而强大的 HTML 方法是什么？

主要问题是这也必须在 Outlook.exe 中起作用。

与下面类似的所有解决方案都不适用于 Outlook。 Outlook 忽略所有水平定位，只是将文本定位在头像图像下方并左对齐，而不是在图像右侧的单独垂直列中。

<div style="width: 100%; overflow: hidden;">
  <div style="float: left; width: 100px;">
    <!-- Avatar -->
    <img src="https://picsum.photos/90" style="width: 100%; height: auto;">
  </div>
  <div style="margin-left: 111px;">
    <!-- E-Mail text content -->
    <p>Here is the remaining content of the email, which is 
    displayed to the right of the avatar, in a virtual 
    column so to speak. This text can be formatted 
    and filled with further content, such as 
    additional paragraphs, lists, images, etc.</p>
  </div>
</div>

这是一个JSFiddle。请注意，如上所述，这在 Outlook 中不起作用。

以下变体在 Outlook 中也不起作用。 Outlook 完全忽略 div 定位。

<div style="width: 100%; columns: 2; column-gap: 20px;">
  <div style="width: 100px; break-inside: avoid;">
    <!-- Avatar -->
    <img src="https://picsum.photos/90" style="width: 100%; height: auto;">
  </div>
  <div>
    <!-- E-Mail text content -->
    <p>Here is the remaining content of the email, which is 
    displayed to the right of the avatar, in a virtual 
    column so to speak. This text can be formatted 
    and filled with further content, such as 
    additional paragraphs, lists, images, etc.</p>
  </div>
</div>

Answer 1

如Outlook 窗口的 HTML/CSS 支持所示，大多数 CSS 属性不受支持。

您应该只使用

<table>

相关的 html 元素及其

valign

属性来实现您的目标。

<table style="width: 100%;">
  <tr>
    <td valign="top" style="width: 111px;">
      <!-- Avatar -->
      <img src="https://picsum.photos/90" style="width: 100px; height: auto;">
    </td>
    <td>
      <!-- E-Mail text content -->
      <p style="margin-top: 0;">Here is the remaining content of the email, which is displayed to the right of the avatar, in a virtual column so to speak. This text can be formatted and filled with further content, such as additional paragraphs, lists, images, etc.</p>

      <p>Here is the remaining content of the email, which is displayed to the right of the avatar, in a virtual column so to speak. This text can be formatted and filled with further content, such as additional paragraphs, lists, images, etc.</p>

      <p>Here is the remaining content of the email, which is displayed to the right of the avatar, in a virtual column so to speak. This text can be formatted and filled with further content, such as additional paragraphs, lists, images, etc.</p>


      <p>Here is the remaining content of the email, which is displayed to the right of the avatar, in a virtual column so to speak. This text can be formatted and filled with further content, such as additional paragraphs, lists, images, etc.</p>
    </td>
  </tr>
</table>