Создание адаптивной электронной почты с плавающей колонкой на основе таблицы без медиазапроса

К сожалению, программа, которую я использую для отправки электронной почты, не допускает ни @media-запросов, ни списков.css в верхней части указанного кода. Это проблематично, поскольку я создаю шаблон электронной почты на основе плавающих столбцов. Я хотел бы, чтобы эти две колонки находились рядом друг с другом при просмотре на планшете или на рабочем столе, но при просмотре на мобильном устройстве должен располагаться список под панелью контента.

Вот база того, что у меня есть:

<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1" style="width: 100%;">
--banner image here--
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;">
<tbody>
<tr>
<td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;">
--content goes here--
</td>
<td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;">
--list of links--
</td>
</tr>
</tbody>
</table>
</div>
Источник

1 ответ

Решение

Это выполнимо Без медиа-запросов вы будете ограничены тем, насколько вы вовлечены. Это будет хорошо работать, если ваши столбцы будут одинаковой ширины. Я не уверен, каков ваш дизайн, но без медиа-запроса будет трудно выровнять столбцы. Вот некоторые грубые HTML, чтобы вы начали.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
    </head>

    <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="100%" align="center" valign="top">       

                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">
                    <tr>
                        <td width="650">

                            <table cellpadding="0" cellspacing="0">

                                    <tr>
                                        <td colspan="1" style="width: 100%;"> --banner image here-- </td>
                                    </tr>

                            </table>
                            <table align="left" width="320">

                                    <tr>
                                        <td align="left" valign="top" width="320" bgcolor="#00CC99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>
                                    </tr>

                            </table>
                            <table align="left" width="180">

                                    <tr>
                                        <td align="left" valign="top" width="180" bgcolor="#99CC33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>
                                    </tr>

                            </table>

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

</body>

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