相当于在Outlook中浮动

Question

相当于在Outlook中浮动

Tho*_*ann 12 html css outlook html-table html-email

我正在尝试float: left一些表,但刚遇到一个主要问题,outlook不支持float.好吧,然后我尝试使用表格对齐等等,但没有运气.这些桌子只是在彼此之下,而不是彼此相邻.人们可以做些什么吗？

PS:它适用于其他设备就好了,它唯一的Outlook,我不能给每个表一个td,因为它会打破其他一些东西.

标记:

<table class="products">
   <tr>
      <td align="left" class="test">
         <!-- Product 1  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 2  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 3 -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <span class="clear"></span>    
      </td>
   </tr>
 </table>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Joh*_*ohn 27

使用width =""而不是CSS在每个对齐的表上设置宽度.

一个有效的例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    table td { border-collapse: collapse; }
    .msoFix { mso-table-lspace:-1pt; mso-table-rspace:-1pt; }
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div style="max-width:640px !important;">

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
          <tr>
            <td width="15" bgcolor="454545">&nbsp;</td>
            <td width="290" bgcolor="454545" align="left" style="padding: 0px;">&nbsp;<br>Table 1<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="454545">&nbsp;</td>
          </tr>
        </table>

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
          <tr>
            <td width="15" bgcolor="959595">&nbsp;</td>
            <td width="290" bgcolor="959595" align="left" style="padding: 0px;">&nbsp;<br>Table 2<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="959595">&nbsp;</td>
          </tr>
        </table>

      </div>
    </td>
  </tr>
</table>

</body></html>

Run Code Online (Sandbox Code Playgroud)

此外,Outlook在对齐的表之间放置4-5像素的间隙.添加它将其减少到大约1px:

<style type="text/css">
   .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
</style>

Run Code Online (Sandbox Code Playgroud)

要完全摆脱它,你将不得不为你的表添加边框(另一个Outlook怪癖黑客).

这在 Outlook 2013 中对我不起作用（从 ALIGN="LEFT" 表中删除添加的空格），但只是将 ALIGN="LEFT" 添加到 IMG 标签本身在 Outlook 中完全可以正常工作......这是狂野的. (2认同)

Answer 2

oez*_*ezi 5

只需将每个子table放入一个自己td的外部即可table。由于td\ 彼此相邻，因此table因此s 也会彼此相邻。

\n\n

当尝试创建 HTML 电子邮件时，代码类似于 it\xe2\x80\x99s 1997。

\n

归档时间：	12 年，8 月前
查看次数：	42976 次
最近记录：	7 年，2 月前