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

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根据此可用）进行的操作。

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 ，因此单词不会自动换行。 如果有可能在正确的文本移至其行之后添加自动换行，那么我将寻求解决方案。

根据该 Outlook不支持display: table和测试后，事实证明是正确的。 因此，请不要建议我使用display: table或类似的显示器（例如inline-table ， table-row ， table-column ， table-cell等）。

Answer 1

float可以与除IBM Notes 9，Outlook 2007-16（台式PC）和Windows 10以外的几乎所有电子邮件客户端一起使用。

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

祝好运。

Answer 2

这是我想出的把戏。

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 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> 

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

干杯