float alternative for email clients

问题:

What is the float alternative for the email clients?

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

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.

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

回答1:

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.

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>

Hope this is the answer you where looking for.

Cheers

回答2:

float works with nearly every email client except IBM Notes 9, Outlook 2007–16 (desktop PC) and Windows 10.

In email clients where float doesn't work, to float something right, as an example, for a <table> I use either <table align="right"> or <table style="text-align: right;">

Good luck.

回答3:

Here is the trick I come up with.

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.

It is straightforward. I need to always have a distance between left and right component as much as possible and it is depicted in the calc property of the fictitious element.