邮件模板开发中不使用flex/grid如何实现元素特定定位

实现方案 #

核心通过媒体查询将表格单元格转为块级元素实现单列布局，全程不使用flex/grid，兼容绝大多数移动端邮件客户端：

完整CSS代码

/* 原有基础样式 保留不变 */
.item{
    background-color: cyan;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: table;
}
.item > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
/* 多端显隐工具类 */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: block !important;
}
/* 移动端适配媒体查询 */
@media only screen and (max-width: 480px) {
    .mobile-only {
        display: block !important;
        text-align: center !important;
        font-size: 12.5px !important;
        margin: 12px 0 !important;
    }
    .desktop-only {
        display: none !important;
    }
    /* 评分表格所有单元格转块级，单列居中 */
    .rate-table tr, .rate-table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 8px 0 !important;
    }
    /* 评分圆圈居中 */
    .item {
        margin: 0 auto !important;
    }
}

修改后的HTML代码

仅需给table加对应class、补充移动端专属显隐元素即可，原有业务结构不变：

<!-- 移动端专属顶部不推荐文字 -->
<div class="mobile-only">Zdecydowanie nie polece</div>

<!-- 给评分table加class="rate-table" -->
<table class="rate-table" style="width: 100%; margin-top: 10px;">
    <tr style="width: 100%;">
        <td style="width: 10%;"><div class="item"><div>0</div></div></td>
        <td style="width: 10%;"><div class="item"><div>1</div></div></td>
        <td style="width: 10%;"><div class="item"><div>2</div></div></td>
        <td style="width: 10%;"><div class="item"><div>3</div></div></td>
        <td style="width: 10%;"><div class="item"><div>4</div></div></td>
        <td style="width: 10%;"><div class="item"><div>5</div></div></td>
        <td style="width: 10%;"><div class="item"><div>6</div></div></td>
        <td style="width: 10%;"><div class="item"><div>7</div></div></td>
        <td style="width: 10%;"><div class="item"><div>8</div></div></td>
        <td style="width: 10%;"><div class="item"><div>9</div></div></td>
        <td style="width: 10%;"><div class="item"><div>10</div></div></td>
    </tr>
</table>

<!-- 移动端专属底部推荐文字 -->
<div class="mobile-only">Zdecydowanie polece</div>

<table style="width: 100%;">
    <tr style="width: 100%;">
        <td style="width: 10%;"><div><div class="desktop-only" style="text-align: left; font-size: 12.5px;">Zdecydowanie nie polece</div></div></td>
        <td style="width: 80%;"><div><div></div></div></td>
        <td style="width: 10%;"><div><div class="desktop-only" style="text-align: right; font-size: 12.5px;">Zdecydowanie polece</div></div></td>
    </tr>
</table>

注意事项 #

• 所有属性加!important是为了覆盖行内样式的高优先级，属于邮件模板适配的常规操作
• 采用多端显隐方案避免了定位偏移问题，兼容性比动态调整位置更强，适配所有支持媒体查询的移动端邮件客户端

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