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

Rachelledev

就像您正在使用电子表格一样思考。您已经设置了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>

HTML电子邮件图像

1 个答案: