Outlook桌面版邮件Grid布局异常：如何实现每行4卡片？

核心适配逻辑 #

Outlook桌面版（基于MSO引擎）不支持现代CSS布局（Grid/Flexbox），必须用表格布局配合条件注释实现固定宽度的列；非桌面版则可以用现代CSS保持原有200px宽度的卡片布局。

完整修复代码 #

<!-- 外层容器：适配所有客户端 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- 给Outlook桌面版设置总宽度，确保4张200px卡片能放下 -->
    <!--[if mso]>
    <td width="800" align="center">
    <table width="800" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <![endif]-->

    <!-- 卡片1 -->
    <!--[if mso]>
    <td width="200" valign="top" style="padding: 0 10px;">
    <![endif]-->
    <!--[if !mso]><!-->
    <div style="width: 200px; display: inline-block; margin: 0 10px; vertical-align: top;">
    <!--<![endif]-->
      <a href="https://www.google.com/" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Image1" style="width:100%; border-radius: 20px;">
      </a>
      <h4><b>My Card 1</b></h4> 
      <p style="font-size: 15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem...</p> 
      <p style="font-size: 15px"><b>Date: 08/15/2023</b></p>
      <p><a href="https://www.google.com/" style="font-size: 15px;">Read More</a></p>
      <br><br>
      <a href="https://www.google.com/">
        <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">Register</button>
      </a>
    <!--[if mso]>
    </td>
    <![endif]-->
    <!--[if !mso]><!-->
    </div>
    <!--<![endif]-->

    <!-- 卡片2：复制上面的卡片结构即可 -->
    <!--[if mso]>
    <td width="200" valign="top" style="padding: 0 10px;">
    <![endif]-->
    <!--[if !mso]><!-->
    <div style="width: 200px; display: inline-block; margin: 0 10px; vertical-align: top;">
    <!--<![endif]-->
      <a href="https://www.google.com/" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Image2" style="width:100%; border-radius: 20px;">
      </a>
      <h4><b>My Card 2</b></h4> 
      <p style="font-size: 15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem...</p> 
      <p style="font-size: 15px"><b>Date: 08/16/2023</b></p>
      <p><a href="https://www.google.com/" style="font-size: 15px;">Read More</a></p>
      <br><br>
      <a href="https://www.google.com/">
        <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">Register</button>
      </a>
    <!--[if mso]>
    </td>
    <![endif]-->
    <!--[if !mso]><!-->
    </div>
    <!--<![endif]-->

    <!-- 卡片3、卡片4重复以上结构 -->

    <!--[if mso]>
    </tr>
    </table>
    </td>
    <![endif]-->
  </tr>
</table>

关键注意事项 #

• Outlook桌面版适配：用<!--[if mso]>条件注释包裹表格结构，给每个卡片对应的<td>设置固定width="200px"，外层表格总宽度设为800px（4*200），加上内边距控制卡片间距。
• 非Outlook适配：用<!--[if !mso]><!-->包裹<div>，设置width:200px和display:inline-block，实现每行4张的效果。
• 图片宽度：所有图片设置width:100%，确保自适应卡片宽度，避免溢出。
• 移除冗余代码：删除原代码中混乱的条件注释和不兼容的CSS（比如position:absolute在邮件中几乎无效）。

内容的提问来源于stack exchange，提问作者JB999