在 Outlook 中包含文本的 inline-block 元素（响应式电子邮件）

Question

AFAIK 不支持 Outlook 上的 display CSS 属性（甚至在 Outlook 2013 上也不支持），但我想知道是否有一个默认的 display:inline-block 样式标签（元素）可以放在哪里里面的文字。

我需要在“桌面”版本的响应式电子邮件中并排放置 2 个块，并在“移动”版本上垂直排列。 （我知道这不是特定于设备的，而是以某种方式调用它）

• 桌面：左块是文本，右块是图像。
• 移动：顶部是文本，然后是图像。

两个块具有相同的宽度和高度，并且在移动客户端和桌面网络邮件（使用 display:inline-block）上一切正常，但不是 Oulook。

对于基于图像的电子邮件，这是一项简单的任务，但是与文本混合就像是油和水的混合。

问题： 是否有任何 HTML 标记可以包含在 Outlook 上默认为 display:inline-block 的文本？

Answer 1

在这种情况下，我将使用一个两列表格，其中左侧单元格中的文本和右侧的图像。您可以在媒体查询中将 CSS 类应用于td，然后将它们堆叠在移动设备上。比如：

HTML

<td class="colsplit" align="left" valign="top" width="50%">
  text
</td>
<td class="colsplit" align="left" valign="top" width="50%">
  image
</td>

CSS

@media screen and (max-width: 480px) {  
  td.colsplit{
    display: block!important;
    width: 100%!important;
  }
}