html - 电子邮件模板的跨客户端 float

Question

我正在创建电子邮件模板。我想要的只是三个盒子的常规 float :

---

简化的 HTML:

        <center>
            <div style="width: 100%; max-width: 480px; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                <div class="main" align="left" width="300" style="display: block; float: left; width: 300px; background: red; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>

                <div class="half" align="left" width="180" style="display: block; float: left; width: 180px; height: 100px; background: green; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>


                <div class="half" align="left" width="180" style="display: block; float: left; width: 180px; height: 100px; background: blue; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>

            </div>
        </center>

CSS:

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

    .half {
        width:45% !important;
    }

    .third {
        width:33% !important;
    }

    .third:last-child {
        width:34% !important;
    }
}

---

这在 iOS 和 android 客户端上运行完美。我只是不知道如何使这个 float 和宽度在 Outlook 中工作(它不需要在那里响应，但我应该正确显示桌面 View )。

Answer 1

看看 email standards project您会看到 Outlook 不支持 float 。创建 HTML 电子邮件时，最好的计划是使用嵌套表格，尽管你的直觉告诉你这是一个多么糟糕的想法。