如何使用 css 创建一个三列网格？

【问题标题】：How to create a three column grid using css?如何使用 css 创建一个三列网格？
【发布时间】：2020-10-05 14:30:28
【问题描述】：

我正在尝试为使用液体模板语言的电子邮件模板创建一个 3 列网格。

很多用户使用 Outlook。我正在尝试使用工作正常的网格表格，但我无法让图像看起来不错。我要么使用不能在 Outlook 中呈现的 CSS 命令，要么看起来真的很糟糕。

这是可行的，但不会在 Outlook 中呈现：

<td>
  <div style="padding: 5px;">
    <img style="width: 100%; height: 150px; object-fit: contain; object-position: center;" src="/images/logo1.png" />
  </div>
</td>

我怎样才能把这个“句子”变成可以呈现给所有电子邮件客户端的东西。

【问题讨论】：

标签： html css email outlook

【解决方案1】：

在处理 HTML 电子邮件时使用<div> 元素通常是不好的做法。您应该严格参考使用 <table> 布局来获得您想要的结果。这样做的原因是许多电子邮件客户端根本不支持其他任何东西。除此之外，一些电子邮件客户端还将忽略<img> 元素上的内联填充和边距样式，以及其他一些特定的东西。这真的取决于。经验法则是，只要您使用 <table> 布局，您可能就可以了。无论如何，大多数情况下。

This old article 涵盖了 HTML 电子邮件中 <div> 元素的一些不便之处。

或者，查看 Outlook 2016 HTML 电子邮件提示中的 this article。

如果您有兴趣了解有关 HTML 电子邮件的更多信息，我还强烈建议浏览帖子的 this gem。

【讨论】：