电子邮件客户端的浮动替代方案

Question

电子邮件客户端的浮动选项是什么？

这是我使用浮动的结果。我想要另一种方法来准确地保留行为。

html

<div class="container">
  <div class="leftText">
    left text
  </div>
  <div class="rightText">
    right text right text
  </div>
</div>

css

.leftText {
  display: inline-block;
  border: 1px solid green;
  background: yellow;
}

.rightText {
  display: inline-block;
  float: right;
  border: 1px solid green;
  background: cyan;
}

jsfiddle

这是我尝试使用在所有电子邮件客户端 text-align 和 calc 中可用的方法（calc 根据 this 可用）。

html

<div class="container">
  <div class="leftText">
    left text
  </div>
  <div class="rightText">
    right text right text
  </div>
</div>

css

.leftText {
  display: inline-block;
  border: 1px solid green;
  background: yellow;
}

.rightText {
  display: inline-block;
  text-align: right;
  width: calc(100% - 58px);
  min-width: 122px;

  border: 1px solid green;
  background: cyan;
}

jsfiddle

这种方法不起作用，因为当正确的文本被移动到它自己的行时，由于设置了 min-width，单词不会换行。如果可以在正确的文本移动到它自己的行后添加自动换行，那将是我所寻求的解决方案。

根据 this Outlook 不支持 display: table，经测试证明是正确的。所以，请不要建议我使用 display: table 或类似的显示（如 inline-table、table-row、table-column、table-cell 等）。

Answer 1

这是我想出的技巧。

html

<div class="l">
  left text
</div>
<div class="m">

</div>
<div class="r">
  rigth text rigth text
</div>

css

.l {
  display: inline-block;
}

.m {
  display: inline-block;
  width: calc(100% - 180px);
}

.r {
  display: inline-block;
}

jsfiddle.

很简单。我需要始终尽可能地在左右组件之间保持距离，它在虚构元素的 calc 属性中进行了描述。

Answer 2

float 几乎适用于所有电子邮件客户端，除了 IBM Notes 9、Outlook 2007–16（台式电脑）和 Windows10。

在 float 不起作用的电子邮件客户端中，为了使某些内容正确浮动，例如，对于 <table> 我使用 <table align="right"> 或 <table style="text-align: right;">

祝你好运。

Answer 3

如前所述，可以用表格来模拟浮点数。下面是使用混合方法编码的代码。它按照你想要的方式工作。

注意：CSS 只是为了向您展示堆叠的工作原理。下面的代码可以在没有媒体查询的情况下工作。

.wrapper{width:680px;outline: 1px solid #f00;}
.wrapper div{outline: 1px solid blue;}
 
@media screen and (max-width: 480px) {
    .wrapper{width:100% !important;}
}

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper">
  <tbody>
    <tr>
      <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">
  
  <!--[if (gte mso 9)|(IE)]><table cellspacing="0" cellpadding="0" border="0" width="680" align="center"><tr><td><![endif]--> 
  
    <div style="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tbody>
     <tr>
       <td style="font-size:10px;">left</td>
     </tr>
      </tbody>
    </table>

    </div>
    <!--[if (gte mso 9)|(IE)]></td><td><![endif]--> 
    
    <div style="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tbody>
     <tr>
       <td style="font-size:10px;">right</td>
     </tr>
      </tbody>
    </table>

    </div>
    
  <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> 
  
   </td>
    </tr>
  </tbody>
</table>

希望这就是您正在寻找的答案。

干杯

电子邮件客户端的浮动替代方案

float alternative for email clients

html

css

css-float

html-email

email-client