HTML 电子邮件图像

Question

我刚刚参加了电子邮件开发人员工作的带回家考试。我的任务是尽我所能从 .png 文件中创建 HTML 电子邮件。我一直在使用表格，我来到了一个必须在文本旁边插入图像的部分，我崩溃了。标题文本与段落相距太远，图像位置不佳；有没有人对如何解决这个问题有任何想法？我的代码如下：

       
div #costume-section {
    
    width:645px;
    height: 225px;
    padding-left: 05px;
    background: #ff821d;
    color: white;    
           
}

 <div id="costume-section">
         <table>
             <th id="cos-font">Costume Contest</th>
             <tr>
               <td>Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on)  We'll hold a kid contest too!</td>
                 <td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png"  /></td>
             </tr>
         </table>
     </div>

Answer 1

? 雷切尔德夫

像处理电子表格一样思考这个问题。您已设置 th 和 tr 表格行。

由于您的标题文本位于包含 2 个 td 的行之外，因此标题文本位于包含文本和图像的 tr 之上。

在这种情况下，您实际上并不需要 th 重新排列表格标记，除非它是必需的。

 <div id="costume-section">
         <table>
             <tr>
               <td>
               <h1>Costume Contest</h1>
               Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on)  We'll hold a kid contest too!</td>
                 
                 <td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png"  /></td>
             </tr>
         </table>
     </div>