在 phpmailer html 中将 div 放在 div 旁边

Question

我正在尝试创建 phpmailer 邮件的 html 结构，我想并排发送 3 个 div，但是当我收到格式化的电子邮件时。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='display: table; width: 60%'>
<div style='font-size: 1vw; background-color: whiteSmoke; text-align: center; padding: 1vw; position: relative;'><b>PEDIDO DE ASSISTÊNCIA</b></div>
<div style='display: flex; align-items: flex-start;'>
    <div style='width: 38%;'>
     <p><b>Cliente:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>                                  
  <p><b>Morada:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>                                           
  <p><b>Código Postal:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        <p><b>Localidade:</b>  xxxxxxxxxxxxxxxxxxx</p>  
  <p><b>Data do Pedido:</b>  21-11-2019</p> 
 </div>
    <div style='width: 30%;'>
  <p><b>Assistência Pedida Por:</b>  xxxxxxxxxxxxxxxxxxxxxxxxx</p>
 </div>
 <div style='width: 25%;'>
  <p><b>Nº Contribuinte:</b>  xxxxxxxxxxxxxxxx</p>
  <p><b>Contacto:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
  <p><b>Email:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
 </div>
</div>
</div>

这里和 html 页面都有效，但是当我发送电子邮件并在 Outlook 中接收它时，它显示为未配置，我将在图像中显示：

div 并没有像我上面的例子那样并排。

Answer 1

您正尝试在 HTML 中同时使用 javascript 和相对较新的 CSS (flexbox) 来发送电子邮件。它不会起作用。

HTML 在电子邮件中非常有限，尤其是在 Outlook 中，它与 gmail 一起提供了非常过时和二流的体验。您需要保持格式非常简单（是的，tables 用于布局！），并使用 emailonacid 和 litmus 等服务在多个设备上测试所有内容。

为电子邮件开发 HTML 非常不愉快，但我想欢迎！

由于您的布局试图模拟 table，使用 table 可能更容易：

<table style='width: 60%'>
    <tr style='background-color: whiteSmoke; text-align: center; padding: 1em; position: relative;'>
        <th colspan="3"><b>PEDIDO DE ASSISTÊNCIA</b></th>
    </tr>
    <tr>
        <td style='width: 38%;'>
            <p><b>Cliente:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p><b>Morada:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p><b>Código Postal:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p><b>Localidade:</b> xxxxxxxxxxxxxxxxxxx</p>
            <p><b>Data do Pedido:</b> 21-11-2019</p>
        </td>
        <td style='width: 30%;'>
            <p><b>Assistência Pedida Por:</b> xxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </td>
        <td style='width: 25%;'>
            <p><b>Nº Contribuinte:</b> xxxxxxxxxxxxxxxx</p>
            <p><b>Contacto:</b> xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p><b>Email:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </td>
    </tr>
</table>

在 phpmailer html 中将 div 放在 div 旁边

Put div next to div in phpmailer html

css

html-email