Можно ли верстать HTML-письмо на div?
Не используйте flex, grid и вёрстку на float в письмах. Движок Word в Outlook игнорирует большинство свойств flex/grid - колонки съезжают в столбик или вылезают за край. Используйте таблицы для структуры, а div - только для мелких обёрток, когда это действительно нужно.
Кратко
- ✓Таблицы по-прежнему самый надёжный способ вёрстки в письмах.
- ✓Flex/grid часто не работает в Outlook на десктопе и старых клиентах.
- ✓html2email помечает рискованное использование div, чтобы вы могли заменить их таблицами.
Не используйте flex, grid и вёрстку на float в письмах. Движок Word в Outlook игнорирует большинство свойств flex/grid - колонки съезжают в столбик или вылезают за край. Используйте таблицы для структуры, а div - только для мелких обёрток, когда это действительно нужно.
| Flex/grid | Таблицы |
|---|---|
| Outlook игнорирует; колонки ломаются | Стабильно во всех клиентах |
В письмах используйте таблицы для вёрстки.
Почему вёрстка на div ломается в Outlook?
Outlook рендерит письма через Word и игнорирует большинство свойств flex/grid - колонки схлопываются или выстраиваются в столбик. Таблицы в этом движке отображаются предсказуемо.
Как безопасно заменить flex?
Используйте двухколоночную таблицу: внешняя обёртка 100%, внутренняя таблица 600px, затем строка с двумя ячейками <td> по 50% ширины (или фиксированной).
Можно ли вообще оставлять div?
Да, но только для обёрток или фона, не для структурных строк и колонок. Стили оставляйте инлайн и простыми.
А как насчёт float?
Float в письмах ненадёжен. Заменяйте колонками в таблице. Если всё же используете float - делайте clear: both и проверяйте в Outlook; риск остаётся.
Как html2email находит рискованные div?
DivLayoutValidator ищет display:flex/grid и выдаёт предупреждения с указанием проблемного фрагмента.
Делают ли медиа-запросы вёрстку на div безопаснее?
В Outlook на десктопе нет - он их игнорирует. В Gmail и Apple Mail помогают, но табличный fallback всё равно нужен.
Как быстро перевести блок с flex на таблицы?
Оберните контент в таблицу на 2–3 колонки, добавьте vertical-align: top;, на узких экранах складывайте колонки через медиа-запросы: display:block; width:100%; на <td>.
Стоит ли использовать VML для фона?
Для полноширинных hero-фонов в Outlook - да, через VML. Не полагайтесь на CSS background-image во flex-контейнерах.
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<tr>
<td width="50%" style="vertical-align:top; padding:10px;">Левая колонка</td>
<td width="50%" style="vertical-align:top; padding:10px;">Правая колонка</td>
</tr>
</table>← Две колонки таблицей; vertical-align:top выравнивает контент по верху.
Скриншот валидатора с предупреждением об использовании flex.
Цифры и источники
- Outlook на десктопе игнорирует flex/grid; тесты Litmus показывают 100% схлопывание колонок при flex без табличного fallback.
- Внутренняя проверка: замена flex-рядов на таблицы снизила баги вёрстки на 90% в 15 кампаниях.
- html2email помечает display:flex/grid, чтобы подсказать замену на таблицы.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации