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

Question

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

这是我使用float的内容。我希望有另一种方法来完全保留行为。

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

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>

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

欢呼