电子邮件客户端的float替代方案 [英] float alternative for email clients

问题描述

电子邮件客户端的float替代方法是什么？

What is the float alternative for the email clients?

这是我使用float的目的。而且我想使用另一种方法来完全保留行为。

Here is what I have using float. And I want the alternative approach to preserve the behavior exactly.

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

这是我尝试使用的所有电子邮件客户端中可用的方法文本对齐和 calc （ calc 可以根据此）。

Here is what I tried to do using available in all email clients text-align and calc (calc is available according to 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

这种方法无法将正确的文本移至其自己的行由于设置了最小宽度，这些单词不能自动换行。如果在正确的文本移至其自己的行后可以添加自动换行，则该解决方案将是我所寻求的。

This approach does not work in a way that when the right text is moved to its own line the words does not wrap due to the min-width being set. If it would be possible to add word wrapping after the right text moved to its own line that solution would be what I seek.

根据此 Outlook不支持 display：table 和经过测试，事实证明这是真的。因此，请不要建议我使用 display：table 或类似的显示（例如 inline-table ， table-row ， table-column ， table-cell 等。

According to this Outlook does not support display: table and after testing it turns out to be true. So, please, do not advise me to use the display: table or similar display (like inline-table, table-row, table-column, table-cell etc.).

推荐答案

如上所述，可以使用表来模拟浮点数。以下是使用混合方法进行编码的代码。它以您想要的方式工作。

As mentioned above, it is possible to use tables to simulate floats. Below is the code using hybrid method of coding. it works the way you want it to.

注意：CSS只是为了向您展示堆栈的工作方式。下面的代码无需媒体查询即可正常工作。

Note: CSS is just to show you how the stacking would work. Below code can work the same without media queries.

.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替代方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！