将div放在phpmailer html中的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

您正在尝试在电子邮件中同时使用JavaScript和HTML中相对较新的CSS（flexbox）。这是行不通的。

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

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

由于您的布局尝试模拟表，因此仅使用表可能会更容易：

<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>