1

残念ながら、私が電子メールを送信するために使用しているプログラムでは、@media クエリや、コードの先頭にある .css リストを使用できません。フローティング列に基づいて電子メール テンプレートを作成しているため、これは問題です。タブレットまたはデスクトップで表示しているときに 2 つの列を隣り合わせに表示したいのですが、モバイル デバイスで表示しているときにリストをコンテンツ パネルの下にドロップします。

これが私が持っているもののベースです：

<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>
4

1 に答える 1

0

それは実行可能です。メディア クエリがなければ、関与する範囲が制限されます。これは、列の幅が等しい場合にうまく機能します。あなたのデザインがどのようなものかはわかりませんが、メディア クエリがなければ、列を均等にするのは難しいでしょう。以下は、作業を開始するための大まかな 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>

于 2014-01-31T23:01:01.007 に答える