徽标和文本未正确浮动

Question

该网站的网址为：http://soteria2.uog.edu/it/signature

当签名粘贴到Gmail中时，它看起来很好。但是当我将它复制到Outlook中时，它看起来是这样的：

。

似乎CSS浮动不起作用。

我该如何解决这个问题呢？

如果你不想查看我链接的网页，这是我的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。

Answer 2

html：

 <div class="wrap ">
    <div class="div-wrap ">
        <img src="https://www.uog.edu/_resources/images/oit/social_media_icons/UOG-BigG-Stacked-RGB.png " />
    </div>
    <div class="div-wrap left-border ">
        <p>Joe Triton</p>
        <p>Computer Center Assistant</p>
        <p>+1 (671) 555-2640</p>
        <p>jtriton@triton.uog.edu</p>
        <p>Information Technology</p>
    </div>
</div>

css：

    .wrap {
        width: 500px;
    }

    .div-wrap {
        display: inline-block;
        width: 48%;
    }

    .div-wrap img {
        width: 60%;
        margin: 0% 10% 0% 20%;
    }

    .left-border {
        vertical-align: top;
        padding-left: 2%;
        border-left: 2px solid #046A38;
    }

jsfiddle

但是，如果你了解Flexbox，那就更好了。