Question

我的项目是生成一个可以复制并粘贴到电子邮件程序（如Outlook或Gmail）中的电子邮件签名。该网站可以在这里找到：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，那就更好了。

徽标和文字无法正确浮动

2 个答案: