Эквивалент плавать в Outlook

Я пытаюсь найти несколько таблиц, но просто столкнулся с серьезной проблемой, Outlook не поддерживает float. Ну, тогда я попытался использовать выравнивание таблицы и т. Д., Но без везения. Таблицы просто появляются друг под другом, а не рядом друг с другом. Что-нибудь можно сделать по этому поводу?Эквивалент плавать в Outlook

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>

источник

2013-07-16 Thomas Teilmann

дублированный вход? http://stackoverflow.com/questions/15367542/in-outlook-html-email-float-does-not-work –

Установите ширину в каждой выровненной таблице с помощью 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>

Кроме того, Outlook помещает зазор 4-5 пикселя между выровненными таблицами. Добавление этого урезает его вниз до 1px:

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

Чтобы избавиться от него полностью, вам придется добавить границы к столам (другой перспективы причуда хак).

источник

2013-07-16 13:04:02 John

Спасибо, я попробую это :) –

Это не сработало для меня в Outlook 2013 удалите добавленное пустое пространство из таблиц ALIGN = "LEFT"), но просто добавив ALIGN = "LEFT" к тегу IMG, полностью работающему отлично в Outlook ..., который является диким. – HBlackorby

Используйте некоторые интернет-ресурсы, такие как:

How To Code HTML Emails

Когда дело доходит до рендеринга HTML, большинство почтовых клиентов примитивны и сломается много хорошо сформированного HTML элементы.

Следующее обсуждение может быть полезным:

What guidelines for HTML email design are there?

Некоторые основные советы:

Использование таблиц для разметки.
Установите максимальный ширину стола шириной 600 пикселей.
Не пытайтесь использовать JavaScript или Flash
Не используйте CSS в теге стиля, поскольку некоторые почтовые клиенты его отбрасывают.
Используйте только встроенные стили CSS.

источник

2013-07-16 10:31:40

Просто поместите каждый суб- table в собственной td внешней table. поскольку td являются друг другом, table s тоже будет.

При попытке создания HTML-EMails, Code like it’s 1997.

источник

2013-07-16 10:32:41 oezi

, но, когда сайт станет уже, будет ли он спрыгнуть? и можно ли центрировать каждый на экране, когда на мобильном? Потому что, когда они находятся ниже друг друга, каждый в своем собственном теле, я не думаю, что его можно центрировать на экране? –

нет, они будут, кроме друг друга, на каждом экране. к сожалению, вы не можете сделать многое, чтобы этого избежать - HTML-рендеринг в EMail-клиентах часто хуже IE6 ... – oezi

Если вы можете жить с наличием 2 таблицы не «отвечает» (один под другим) в Outlook, это работает для меня:

........ 
<!--[if gte mso 9]> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
    <td> 
<![endif]--> 

<!-- table 1 goes here --> 

<!--[if gte mso 9]> 
    </td> 
    <td> 
<![endif]--> 

<!-- table 12 goes here --> 

<!--[if gte mso 9]> 
    </td> 
    </tr> 
</table> 
<![endif]--> 
........

источник

2015-01-27 10:04:12

кажется Outlook.com отфильтровывает float атрибуты полностью, но поддерживает display: inline-block.
Конечно, это, скорее всего, сломает ваши столы, поскольку они зависят от display:table, но это может помочь вам с любыми div.

источник

2016-02-25 16:39:30

Эквивалент плавать в Outlook

ответ

Смежные вопросы