电子邮件模板 - 内联部分未在 Outlook 中左右完全对齐答案

【问题标题】：Email template - Inline sections are not aligning completely left and right in outlook电子邮件模板 - 内联部分未在 Outlook 中左右完全对齐
【发布时间】：2021-05-19 00:12:31
【问题描述】：

我正在使用电子邮件模板，其中我的第二个 tr section 应该完全左右对齐。正确的部分并不完全正确。我在这里使用了 td 内的表格。对于浏览器中的电子邮件工作正常，但在 Outlook 365 中未正确对齐。我已经使用石蕊 putsmail 电子邮件测试器进行了测试。下面是代码

HTML

<!DOCTYPE html>
<html>

<body>
    <table style="width:60%;font-size:18px;background-color:#F5F5F5;padding:10px" align="center" border="0"
        cellspacing="0" cellpadding="0">
        <tr>
            <td style="font-size:20px;font-weight:bold;">
                <table>
                    <tr>
                        <td style="font-size:22px;font-weight:bold;float:left">
                            <b>Lorem ipsum is a dummy text used to replace text in some areas</b>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;float:right">
                            <b>Lorem ipsum is a dummy text used to replace text in some areas</b>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width:100%;">
                    <tr>
                        <td style="float:left"><b>Lorem ipsum</b></td>
                        <td style="float:right"><b>Lorem ipsum</b></td>
                    </tr>
                    <tr>
                        <td style="float:left">Lorem ipsum</td>
                        <td style="float:right">Lorem ipsum</td>
                    </tr>
                    <tr>
                        <td style="float:left">Lorem ipsum</td>
                        <td style="float:right">Lorem ipsum</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

对于那些要对齐或定位在极端位置的文本，我们可以使用

display: flex;
flex-direction: row;
justify-content: space-between;

为此，首先在第二个<tr> 部分中为<tr>s 分配一个类class = "table-items"。

       <tr>
            <td>
                <table style="width:100%;">
                    <tr class = "table-items">
                        <td><b>Lorem ipsum</b></td>
                        <td><b>Lorem ipsum</b></td>
                    </tr>
                    <tr class = "table-items">
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                    </tr>
                    <tr class = "table-items">
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                    </tr>
                </table>
            </td>
        </tr>

现在，<tr class = "table-items" 中的元素将有一个显示 flex、方向行，而<td> 标记内的内容<tr class="table-items"> 将连续处于极端状态。

在head 中添加style 标记，然后在其中添加以下代码。

<style>
    .table-items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
</style>

【讨论】：

它不工作，当我用石蕊测试时同样的问题