javascript - Logo 和文字无法正确 float

Question

我的元素是生成一个电子邮件签名，可以将其复制并粘贴到电子邮件程序(如 Outlook 或 Gmail)中。该网站可在此处找到:http://soteria2.uog.edu/it/signature

将签名粘贴到 Gmail 中后，看起来没问题。但是当我将它复制到 Outlook 中时，它看起来像这样: .

如您所见，竖线和文本位于 Logo 下方，而不是右侧。似乎 CSS float 不起作用。

我该如何解决这个问题？

如果您不想检查我链接的网页，这是我的 html 代码:

<span id="signature">
        <div style="width:500px">
            <div class="row">
                <div class="column" style="float: left;
                                          width: 14%;
                                          padding: 6px;">
                    <img src="https://www.uog.edu/_resources/images/oit/social_media_icons/signature/BigG-resized-but-blurry.png" alt="Signature Logo" style="height:130px; width:auto; margin:0px; padding-top: 8px;"/>
                </div>
                <div class="column" style="float: left;
                                          width: 14%;
                                          padding: 6px;">
                    <div class="vl" style="border-left: 2px solid;
                                            color: #046A38;
                                            height: 150px; font-family: Calibri, sans-serif;">

                        <h1 id="name-signature" style="font-size:15px; color:#046a38; margin:0px; padding-left: 10px; padding-top: 14px; width: 300px; font-family: Calibri, sans-serif;">Joe Triton</h1>
                        <h2 id="title-signature" style="font-size:15px; color:#046a38; margin:0px; font-style:italic; padding-left: 10px; padding-top: 1px; width: 300px; font-family: Calibri, sans-serif;">Computer Center Assistant</h2>

                        <p style="font-size:15px; color:#464646; margin:0px; padding-left: 10px; padding-top: 1px; width: 300px;">
                            <a id="office-signature" href="tel:5551231234" target="_blank" style="color:#464646; font-family: Calibri, sans-serif;">+1 (671) 555-2640</a><br/>
                            <a id="email-signature" href="mailto:jtriton@triton.uog.edu" target="_blank" style="color:#464646; font-family: Calibri, sans-serif;">jtriton@triton.uog.edu</a><br />
                            <!-- href="https://it.uog.edu/" target="_blank" -->
                            <span id="department-signature" style="color:#464646; font-family: Calibri, sans-serif;">Information Technology</span>
                        </p>
                        <div id="socialMediaIcons" style="width:300px;">
                        </div>
                    </div>
                </div>
            </div>
            <div style="clear:both;"></div> <!--this line of code causes the following to not be floated.  The problem isn't seen in the browser, you see it when you copy it to Gmail -->
            <p style="font-size:12px; color:#464646; margin:0px; padding-top: 10px; font-family: Calibri, sans-serif;"><em>The University of Guam is an equal opportunity provider and employer.</em></p>
            <hr style="border-color: #00652E; 
                       margin: 0 0px 20px; 
                       border: 0;
                       border-top: 1px dotted #B3B2B1;
                       height: 1px;"/>
            <p style="font-size:12px; color:#464646; margin:0px; text-align:justify; font-family: Calibri, sans-serif;">CONFIDENTIALITY STATEMENT:  This message is from the University of Guam and contains information which is privileged and confidential and is solely for the use of the intended recipient. If you are not the intended recipient, any review, disclosure, copying, distribution, or use of the contents of this message is strictly prohibited.  If you have received this transmission in error, please destroy immediately.</p>
            <br/>
            <p style="font-size:12px; color:#464646; margin:0px; text-align:justify; font-family: Calibri, sans-serif;">This email message (including any attachments) is for the sole use of the intended recipient(s) and may contain confidential information covered under the Family Educational Rights &amp; Privacy Act (FERPA). If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this message (including any attachments) is strictly prohibited. If you have received this message in error, please destroy all copies of the original message (including attachments) and notify me immediately by email or phone. Thank you.</p>
        </div>
    </span>

Answer 1

在 html 邮件中情况有所不同。一些现代的 css 没有应用 html 邮件。

检查 here .