HTML CSS 电子邮件网格未正确显示

问：

我有一个电子邮件模板，可以在非桌面版本的 Outlook 上完美运行。但是，在 Outlook 上渲染时，它看起来很糟糕。 电子邮件的这一部分是一张卡片（将来它将包含几张卡片，但为了简单起见，我在这里只有一张），问题是宽度（在 Outlook 上）采用可用的全部宽度，而不仅仅是一块（在非 Outlook 上，宽度设置为 200px（第 4 行））。 如何在 Outlook 上实现网格视图（每行 4 张卡片）（第 2 行上的网格值）：

    <!--[if mso]> 
    <tr>
        <td width="20px" style="background-color: #f2f2f2; margin-top: 50px; max-height: 500px;">
    <![endif]-->
    
        <a href="https://www.google.com/">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Image1" style="width:50%; border-radius: 20px;">
      </a>
        <!--[if !mso]>-->
        <div>
        <!--<![endif]-->

        <!--[if mso]>
        <tr>
            <td class="container">
        <![endif]-->

            <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="positions: absolute; bottom: 0; background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">Register</button>
                </a>
        <!--[if !mso]>-->
        </div>
        <!--<![endif]-->

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

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

    <!--[if !mso]>-->
    </div>
    <!--<![endif]-->

</td>                                        

谢谢