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

-1

我试图设计一个html电子邮件模板的基本布局。我见过的大多数例子都使用了一个主包装表;我写这反而：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>

你可以看到，有一个拳头表，对于图像旗帜，然后，而不是第二行，还有一个单独的表。作为方法是否正确？我希望它像使用部分标签分隔网站一样。

来源

2017-09-25 Lime In The Coconut

''我的建议是取出'宽度：100％;'。对于Outlook，'width =“600”'应该没问题。一些电子邮件客户端将扩展到100％的窗口，这并不总是期望的效果，而“最大宽度：600px;”没有声明宽度超过600. – gwally

是否有任何答案适合您？ – Syfer

我已经采取了你的代码，并做了些许修改，并在@gwally所建议的内容中加入。以下代码适用于支持媒体查询的所有设备（包括Gmail应用）。让代码旋转（运行代码，全屏显示然后调整浏览器大小）以查看它的工作原理。

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

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Lime in the coconut</title> 
 
\t <style type="text/css"> 
 
\t \t .container{width:600px;} 
 
\t \t @media only screen and (max-width:601px) { 
 
\t \t \t .container{width:100% !important;} 
 
\t \t \t .banner img{width:100% !important; height:auto !important;} 
 
\t \t } 
 
\t </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>

让我知道你在想什么。

来源

2017-09-25 23:42:18 Syfer

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

来源

2017-09-25 19:13:01 Amorandron

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

回答

相关问题