В outlook html email, float не работает

Я хочу этот макет, где у меня прямоугольная коробка. И внутри поля слева есть текст, а справа есть изображение. Это выглядит хорошо в браузере, но при отправке в виде html-письма в Outlook плавающее право не работает. Он помещает изображение в следующую строку под текстом. Любые идеи о том, как сделать эту работу? (Я пытаюсь избежать использования таблиц.)

<div style="width: 100%;border-style:solid;overflow: hidden;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

ОТВЕТЫ

Ответ 1

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

Я бы рекомендовал некоторые онлайн-ресурсы, такие как:

Как написать HTML-письма электронной почты: MailChimp

Это обсуждение SO может быть полезно:

Какие существуют рекомендации для дизайна электронной почты HTML?

Ответ 2

Очень поздно в разговоре, но вот как "плавать" в html-письме, используя align="".

Пример здесь

Кроме того, если вы ищете ресурсы в html-письме (я полагаю, что вы, как ответ, который вы указали правильно, очень общий), вот огромный список ресурсов.

Ответ 3

Это действительно хорошее руководство от Mail Chimp по кодированию для электронных писем HTML:

http://kb.mailchimp.com/article/how-to-code-html-emails

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

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

В основном код электронной почты, как если бы он был примерно в 2003 году.

Ответ 4

CampaignMonitor предоставляет это довольно блестящее руководство для всей поддержки CSS для нескольких почтовых клиентов, которая также доступна как pdf или xls.

Как сказано выше, поддержка электронной почты для CSS очень ограничена, главным образом из-за Microsoft, чтобы использовать Word в качестве механизма рендеринга html.

Ответ 5

просмотрите https://www.campaignmonitor.com/css/ здесь он перечисляет все, что поддерживается и не поддерживается в электронной почте

Вместо float вы можете использовать внешнюю таблицу и поместить содержимое, которое хотите поместить слева в левой td внешней таблицы.

Это не изящный ответ, но я сделал это так.

Ответ 6

Я нашел способ применить float на Outlook.com.
Просто используйте тег как Float: left.

<span style="Float:left;">Content to float</span>

Возможно, вам следует использовать ! important;
Я тестировал его, и он работал.

Ответ 7

Простые плавающие изображения могут быть похожими на

<img src="yourimage" align="left" />

НО таким образом вы не получите твердых результатов с дополнением между текстом и изображением, внешний вид удаляет поля и отступы, и ваш текст будет располагаться рядом с изображением. Поэтому попробуйте следующее:

<div style="text-align:justify;">

...a lot of text here untill you want to insert an image that floats left...

    <table cellpadding="0" cellspacing="0" align="left" style="float: left;">
        <tr>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
            <td width="15">&nbsp;</td>
        </tr>
    </table>

...a lot more text here until you need an image that floats right...

    <table cellpadding="0" cellspacing="0" align="right" style="float: right;">
        <tr>
            <td width="15">&nbsp;</td>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
        </tr>
    </table>

... a lot more text here...

</div>

Вам нужно обернуть вокруг него элемент "table", чтобы получить эффект заполнения поля в Gmail, Outlook (онлайн), Microsoft Outlook (настольный клиент),...

Дайте таблице атрибут align = left или right. (Отредактируйте ответ здесь: в дополнение и откат для других почтовых клиентов также дайте таблице значение с плавающей точкой, так что сделайте оба. Они поддерживают друг друга. Некоторые клиенты понимают "float", другие понимают "align", некоторые понимают,...) Ваша таблица будет плавать в тексте почти как изображение. Единственное различие заключается в том, что в Outlook таблица генерирует автоматический разрыв строки в тексте, где изображение с выравниванием влево или вправо не создает разрывов.

Для установки поля, так как мы теперь работаем со столом, добавьте дополнительный "td" с шириной = "15" влево или вправо от ячейки изображения и нераскрывающееся в нем пространство. (или прозрачный gif → spacer.gif)

&nbsp;

Лучше не оставлять ячейки пустыми, потому что в противном случае ширина вашей ячейки не будет соблюдаться в определенных почтовых клиентах

Для верхнего и нижнего полей мы можем использовать атрибут "vspace", не забудьте указать для него атрибут align = left или right. В противном случае "vspace" не будет работать.

Ответ 8

Когда вы плаваете что-то справа от чего-то, правый плавающий элемент всегда должен сначала появляться в коде. Вот так:

<div style="width: 100%;border-style:solid;overflow: hidden;">
    <img src="someImage"  style="float: right;"/>
    <h3> Your appointment Details</h3>
</div>