Question

我正在尝试为html电子邮件模板设计基本布局。我见过的大多数例子都使用主包装表;我改为写了这个：

 <body>
    <center>
      <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
        <tr>
          <td>
            <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
              <tr>
                <td>
                  <img src="banner.jpg" alt="" style="width:100%;max-width:600px;height:auto" width="600" />
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
        <tr>
          <td width="50%">
            <table align="center">
              <tr>
                <td>
                  <p>content</p>
                </td>
              </tr>
            </table>
          </td>
          <td width="50%">
            <table align="center">
              <tr>
                <td style="text-align:center">
                  <p>content</p>
                </td>
              </tr>
            </table>
          </td>
        </tr>


      </table>
    </center>
</body>

正如您所看到的，图像横幅有第一个表，然后是第二行，还有另一个单独的表。方法是否正确？我打算用分段标签分隔一个网站。

Answer 1

是的，这是一种完全可行的方法。

Answer 2

我已经接受了你的代码并做了一些细微的修改，并添加了@gwally的建议。以下代码适用于支持媒体查询的所有设备（包括Gmail应用）。给代码一个旋转（运行代码，全屏然后调整浏览器大小）以查看它是如何工作的。

如果您希望将媒体查询定位到较小的设备，则可以将媒体查询更改为480px。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lime in the coconut</title>
	<style type="text/css">
		.container{width:600px;}
		@media only screen and (max-width:601px) {
			.container{width:100% !important;}
			.banner img{width:100% !important; height:auto !important;}
		}
	</style>
</head>

<body>
<center>
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto">
    <tr>
      <td>
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:600px;margin: 0 auto">
          <tr>
            <td class="banner">
              <img src="https://i.stack.imgur.com/AKVzJ.png" alt="" style="max-width:600px;height:auto" width="600" />
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto">
    <tr>
      <td width="50%">
        <table border="0" align="center" cellpadding="5" cellspacing="0">
          <tr>
            <td>
              <p>content</p>
            </td>
          </tr>
        </table>
      </td>
      <td width="50%">
        <table border="0" align="center" cellpadding="5" cellspacing="0">
          <tr>
            <td style="text-align:center">
              <p>content</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>


  </table>
</center>

让我知道你的想法。

HTML电子邮件：如何实现基本布局

2 个答案: