Question

我试图让这6个内联列在桌面上每行3个，在移动设备上2个。

Outlook ghost表代码中的某些内容导致所有6个出现在一行并拉伸表。我在td，max-widths，min-widths等尝试了宽度，但似乎没有任何效果。

它应该是什么样的：

如何在Outlook 2013/2016 Windows中显示。

代码：

<html>
<head>
<meta charset="UTF-8">
<title>Hybrid Grid Master</title>
<style type="text/css">

  table td { border: 1px solid cyan;}
  @media only screen and (max-width: 600px) {
    .wrapper{width:95% !important;}
  }

</style>
</head>
<body style="margin:0; padding:0; background-color:#F8F8F8">
<center>

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F8F8F8" class="wrapper">
  <tr>
    <td align="center" valign="top" width="100%">
      <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
      <td align="center" valign="top" width="600">
      <![endif]-->
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="font-size:0;">
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </td>
  </tr>
</table>
</center>
</body>
</html>

Answer 1

Outlook使用Word呈现HTML内容。请查看以下描述支持和不支持的HTML元素，属性和级联样式表属性的文章：

希望你会发现它们很有帮助。

Answer 2

我能够通过在Outlook幻影代码中添加来解决此问题。因此，它只将其破坏到了Outlook桌面客户端。

在Windows上的Outlook 2013/2016中内联问题

2 个答案: