Outlook 中的 HTML email 显示错误

Question

I have the following code for an HTML email:

<div style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;">

<img src="https://via.placeholder.com/140x99" height="140" width="99" style="height:140px;width:99px;display:block;border:0;float:right;margin:0px;padding:0px;">

<p style="margin:0;font-size:30px;font-weight:700;padding-left:10px;margin-top:0px;padding-top:10px;">This is an important example header!</p>

</div>

I expect the HTML to get rendered like this:

The text is on the left side, the image is on the right side and has the same height as the red parent element.

I tested this with all 86 e-mail renderers of Email On Acid . The HTML code gets rendered correctly on almost all email clients.

But there's a wrong display on the following e-mail clients:

Outlook Office 356 (Windows 10)
Outlook 2007 (Windows 7)
Outlook 2010 (Windows 7)
Outlook 2013 (Windows 7)
Outlook 2016 (Windows 10)
Outlook 2019 (Windows 10)

I get the following output:

You see, the image is on the left side and the text is below the image.

What can I do to make the output right also on Outlook email clients?

Answer 1

Apply align="right" on image.

Note: I am not 100% sure if it'll work, since I don't have access to Email on Acid at the moment.

<div style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;">

<img src="https://via.placeholder.com/140x99" align="right" height="140" width="99"
style="height:140px;width:99px;display:block;border:0;float:right;margin:0px;padding:0px;">

<p style="margin:0;font-size:30px;font-weight:700;padding-left:10px;margin-top:0px;padding-top:10px;">This is an important example header!</p>

</div>

Answer 2

I finally ended up with this code, that is working also on Outlook:

<center>

<!--[if !mso]><!-->
<table style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;border-spacing:0px;">
<!--<![endif]-->
<!--[if mso]>
<table style="background-color:red;width:600px;height:140px;margin-left:auto;margin-right:auto;border-spacing:0px;align:center;">
<![endif]-->

<tbody>
<tr>
<td style="margin:0;font-size:30px;font-weight:700;padding-left:10px;width:100%;">This is an important example header!</td>
<td style="margin:0px;padding:0px;"><img src="https://via.placeholder.com/140x99" height="140" width="99" style="height:140px;width:99px;border:0;margin:0px;padding:0px;display:block;"></td>
</tr>
</tbody>
</table>

</center>