HTML электронная почта выравнивает текст

Я пытаюсь выровнять часть текста справа и другую часть слева в письме HTML, но в Outlook float не работает Так что в основном я ищу float CSS в Outlook. Я знаю, это звучит довольно жутко и text-align или же align="" не работал Какие-либо предложения?

<td>
   <span style="text-align:left; float:left;">
       First part
   </span>
   <span style="text-align:right; float:right;">
       Second part
   </span>
</td>
Источник

4 ответа

Решение

Честно говоря, если вы пишете HTML, я бы использовал таблицы. Не все CSS-селекторы доступны во всех почтовых клиентах, и вы сведете с ума, пытаясь сделать это любым другим способом. Письма в формате HTML похожи на Интернет 5 лет назад.

Есть несколько хороших документов на эту тему:

http://www.campaignmonitor.com/css/

http://www.emailology.org/

Для вашего примера:

<td>
   <table cellpadding="0" cellspacing="0" width="100%">
       <tr>
           <td align="left">First part</td>
           <td align="right">Second part</td>
       </tr>
   </table>
</td>

Это ужасно, но, к сожалению, это все еще лучший способ.

Источник

Использовать (содрогаться) таблицы раскладок.

Поддержка внешнего вида в Outlook настолько ужасна, что другого пути нет.

Есть статья о 24 путях с некоторыми общими советами для написания электронной почты в формате HTML.

Источник 
<p align="right">My right content</p>

Это должно сделать трюк, как это HTML1.

Источник

У меня была аналогичная проблема. Я хотел центрировать три изображения в нижнем колонтитуле моего электронного письма. Я заставил его работать так.

                  <div style="display:inline-flex; width:100%;">
                <img style="width: 15%; height:fit-content; margin: 0 7.5%;" src="https://example.com/employment-ontario.png" alt='img-logo0'/>
                <img style="width: 15%; height:fit-content; margin: auto 7.5%;" src="https://example.com/canada-logo.png" alt='img-logo1'/>
                <img style="width: 15%; height:fit-content;  margin: auto 7.5%;" src="https://example.com/ontario-govt.png" alt='img-logo2'/> 
            </div>

изображение сmargin: 0 7.5% является самым большим из всех изображений (если вы хотите имитироватьalign-items: centerустановите два других на изображения дляmargin: auto 7.5%, они автоматически центрируют ваши изображения.

Примечание. В этом примере 7,5% относятся только к одной стороне вашего контейнера, поэтому общая маржа слева и справа будет составлять 15%. за один img, что дает в общей сложности 45% использования.

Моя сумма составляет 90%, но вы поняли.

Изображение того, как это выглядит ниже.

Источник
Другие вопросы по тегам