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

【问题标题】：float alternative for email clients电子邮件客户端的浮动替代方案
【发布时间】：2018-10-22 04:17:44
【问题描述】：

电子邮件客户端的浮动替代方案是什么？

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

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 等）。

【问题讨论】：

Outlook 电子邮件客户端不喜欢 div 的
@Syfer，我应该用什么代替？
只坚持桌子。按照 gwally 的建议去做
@Syfer，表格不允许内容转到下一行。
分词是你的朋友。

标签： html css css-float html-email email-client

【解决方案1】：

float 可与几乎所有电子邮件客户端配合使用，除了 IBM Notes 9、Outlook 2007–16（台式 PC）和 Windows 10。

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

祝你好运。

【讨论】：

表格与浮点数相差甚远。例如，在小屏幕上，单元格不会转到下一行。
div 在电子邮件中没有通用支持。不支持float 的相同客户端不支持div。您可以创建一个table 作为可以在电子邮件周围浮动的对象。我认为这对经验丰富的开发人员来说是清楚的。电子邮件开发不是 Web 开发。它使用类似的技术，但方式不同。

【解决方案2】：

如上所述，可以使用表格来模拟浮动。下面是使用混合方法的编码。它按您希望的方式工作。

注意：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>

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

干杯

【讨论】：

Outlook 不支持inline-block。
@YaroslavTrofimov 是的，它不在 div 上，这就是为什么它周围有一张幽灵表。上面的代码可以完美运行，除非电子邮件所见即所得编辑器是旧的并且不喜欢 cmets（之前经历过）

【解决方案3】：

这是我想出的窍门。

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 属性中进行了描述。

【讨论】：

Outlook 电子邮件客户端不喜欢 div 的