Outlook邮件中display: inline失效，如何实现表格与图片同行？

这问题我太熟了！Outlook的邮件渲染引擎（基于Word）对现代CSS的支持特别拉胯，display: inline这类属性在它眼里跟不存在一样，非得用它认的老办法——HTML表格布局，这是邮件开发里的黄金法则，几乎能兼容所有邮件客户端，包括顽固的Outlook。

为什么你的原代码在Outlook里失效？ #

Outlook会直接忽略display: inline这类CSS属性，而且它会把块级元素（比如<h1>）强制渲染成单列，哪怕你设置了inline也没用。图片虽然默认是行内元素，但在Outlook里经常会被当成块级处理，导致全部元素换行。

针对你的示例代码的修复方案 #

把需要同行的元素放进一个无间距的表格里，每个元素占一个<td>，这样Outlook就会乖乖让它们在同一行显示了：

<html>
<head>
    <title></title>
    <style>
        /* 针对现代浏览器的优化，Outlook会忽略大部分外部CSS，但还是写上 */
        .inline-cell {
            vertical-align: middle; /* 让元素垂直居中，视觉更协调 */
        }
        img {
            width: 100px;
            height: 100px;
            border: 0; /* 去掉图片默认的蓝色边框 */
        }
        h1 {
            margin: 0; /* 去掉h1默认的上下边距，避免多余空白 */
            font-size: 18px; /* 调整字体大小，避免和图片比例失调 */
        }
    </style>
</head>
<body>
    <!-- 核心：用表格实现同行布局，Outlook完美支持 -->
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td class="inline-cell">
                <img src="Image1.jpg" alt="Left Image">
            </td>
            <td class="inline-cell" style="padding: 0 15px;">
                <!-- 内联样式加间距，Outlook更认这个 -->
                <h1>afdsgdf dfgsdf dsfgf</h1>
            </td>
            <td class="inline-cell">
                <img src="Image2.jpg" alt="Right Image">
            </td>
        </tr>
    </table>
</body>
</html>

如果是图片和表格同行的情况 #

只需要把其中一个<td>的内容换成你的表格就行，原理完全一样：

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td class="inline-cell">
            <img src="your-image.jpg" alt="Your Image">
        </td>
        <td class="inline-cell" style="padding-left: 10px;">
            <!-- 这里放你的目标表格 -->
            <table cellpadding="5" cellspacing="0" border="1">
                <tr>
                    <td>表格内容1</td>
                    <td>表格内容2</td>
                </tr>
                <tr>
                    <td>表格内容3</td>
                    <td>表格内容4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

邮件开发的几个关键小技巧 #

• 尽量用表格布局：Outlook对<div>的支持极差，表格是最稳妥的布局方式。
• 优先用内联样式：Outlook会忽略很多外部样式表的属性，关键样式（比如间距、对齐）直接写在元素的style属性里更可靠。
• 给图片加alt属性：不仅符合无障碍规范，还能在邮件客户端默认不加载图片时提示内容。
• 测试一定要用Windows版Outlook：Mac版Outlook的渲染引擎相对友好，Windows版才是真正的“坑王”，测试时一定要覆盖它。

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