时间戳

首页 > 解决方案 > 切换小屏幕时如何保持浮动 div 不变？

html - 切换小屏幕时如何保持浮动 div 不变？

问题描述

我创建了一个 html 电子邮件签名，它在计算机上发送的电子邮件上看起来不错，但是当在 iphone 上查看签名时，imageholder div 会在 textholder 上方移动。即使在较小的屏幕上，如何使它们保持在同一条线上？

    <div id="textcontainer"  style="font-family:helvetica; font- 
    size:12px;">
    <br><br><br>
    
    </div>
    <div id="container" style="width:360px; height:195px; font-family: 
    futura;">
    
    <div id="imageholder" style="width:150px; height:149px; float:left; 
    padding:10px;">
    <img src="https://i.ibb.co/x8x5Gbx/image.png">
    </div>
    <div id="textholder" style="width:175px; height:150px; float:left; 
    padding-top:25px; padding-left:0px; padding-bottom:10px; padding- 
    right:10px;">
    <font style="color:#0F2E51; font-size:16px; padding-left:8px;"> 
    Name</font><br>
    <font style="color:#0F2E51; font-size:16px; padding-left:8px;"> . 
    Title</font><br>
    <font style="color:#0F2E51; font-size:16px; padding-left:8px;"> O 
    </font><font style="color:#0F2E51; font-size:16px;"> (888) 888- 
    8888</font><br>
    <font style="color:#0F2E51; font-size:14px; padding-left:8px;"> F 
    </font><font style="color:#0F2E51; font-size:16px;"> &nbsp;(888) 
    888-8888</font><br>
    <font style="color:#0F2E51; font-size:16px; padding-left:8px;"> 
    Company name</font>



    </div>
    <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
    <div><font style="color:#000000; font-size:12px;">disclaimer</font>
    </div>

标签： htmlhtml-emailsignature

解决方案

不要在 html 邮件中使用 div，那是行不通的。使用表格，如下所示：

<table colspan="0" rowspan="0" border="0">
    <tr>
        <td width="150" style="width:150px">
            <img src="https://i.ibb.co/x8x5Gbx/image.png" style="width:150px; height:149px;">
        </td>
        <td width="175">
        <table colspan="0" rowspan="0" border="0" width="100%">
                <tr>
                    <td width="100%" style="color:#0F2E51; font-size:16px; line-height: 20px; padding-left:8px; font-family:helvetica;">
                            Name<br>
                            . Title<br>
                            O (888) 888- 8888<br>
                            F  (888) 888-8888<br>
                            Company name<br>
                    </td>
                </tr>                     
        </table>            
        </td>
    </tr> 
    <tr>
        <td colspan="2" style="color:#000000; font-size:12px;">
            disclaimer
        </td>
    </tr>
</table>

推荐阅读