我想知道如何在徽标下面提供文字。
这是代码，我找不到徽标下面的文字。谢谢 现在这就是我得到的：
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
p{margin-bottom:10px;}
/**
* @tab Page
* @section background color
* @tip Choose a color for your HTML email's background. You might choose one to match your company's branding.
* @theme page
*/
body {
/*@editable*/ background-color:#62788F;
text-align:center;
}
#layout {
margin:0 auto;
text-align:left;
}
/**
* @tab Header
* @section header top
* @tip Set the look of the archive link bar.
*/
#header-top {
/*@editable*/ background-color:#62788F;
/*@editable*/ border-top:0px none;
/*@editable*/ border-bottom:0px none;
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:11px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
padding:15px 0 5px;
/*@editable*/ text-align:center;
}
/**
* @tab Header
* @section title style
* @tip Titles and headlines in your message body. Make them big and easy to read.
* @theme title
*/
/**This is the title*/
.primary-heading {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:46px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin:0;
padding:0px;
/*@editable*/ text-transform:uppercase;
}
/**
* @tab Header
* @section subtitle style
* @tip This is the byline text that appears immediately underneath your titles/headlines.
* @theme subtitle
*/
.secondary-heading {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:18px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
margin:0 0 0 0;
padding:10px 0 0 0;
/*@editable*/ /*text-transform:uppercase; Wrenching Tips For DIY'ers*/
/*@editable*/ text-transform:uppercase;
}
/**
* @tab Body
* @section intro content
* @tip This is the default text style for the introductory content of your email.
* @theme content
*/
#content-intro {
/*@editable*/ background-color:#62788F; /**background of the text title*/
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
padding:15px 10 20px 10; /*New*/
/*padding:15px 0 20px 0; O*/
vertical-align:top;
width:300px;
}
#content-intro-text {
/*@editable*/ /*background-color:#62788F;*/ /*background of the text title*/
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
/*padding:15px 0 20px 0; O*/
/*vertical-align:top;*/
/*width:300px;*/
}
#content-intro p{
width:300px
/*width:285px O */
}
#image{
padding:15px 0 20px 0;
text-align:left;
vertical-align:top;
}
/**
* @tab Body
* @section intro content
* @tip This is the default text style for the introductory content of your email.
* @theme content
*/
#content-left, #content-right{
/*@editable*/ border-top:1px solid #8193A5;
padding:0 0 10px 0;
vertical-align:top;
}
/**
* @tab Body
* @section sidebar widget headings
* @tip This is the default style for the sidebar widgets of your email.
* @theme content
*/
.widget .secondary-heading {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:18px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ text-transform:uppercase;
}
/**
* @tab Body
* @section sidebar widget text
* @tip This is the default style for the sidebar widgets of your email.
* @theme content
*/
.widget {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
margin:20px 0;
width:290px;
}
/**
* @tab Body
* @section closing content
* @tip This is the default text style for the closing content block of your email.
* @theme content
*/
#content-outro{
/*@editable*/ background-color:#8193A5;
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
padding:20px;
}
/**
* @tab Body
* @section closing content heading
* @tip This is the default style for the heading of the closing content block of your email.
* @theme content
*/
#content-outro .secondary-heading {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ text-transform:uppercase;
}
#button{
text-align:center;
}
/**
* @tab Body
* @section closing content button
* @tip This is the default text style for the closing content button.
* @theme content
*/
#button a {
/*@editable*/ background-color: #92AECB;
/*@editable*/ color: #FFFFFF;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size: 18px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight: bold;
padding: 15px 30px;
/*@editable*/ text-decoration: none;
/*@editable*/ text-transform: uppercase;
}
/**
* @tab Footer
* @section footer
* @tip You might give your footer a light background color and separate it with a top border
* @theme footer
*/
#footer {
/*@editable*/ background-color:#62788F;
/*@editable*/ border-top:0px none;
/*@editable*/ border-bottom:0px none;
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:11px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:14px;
padding:20px 0 20px 0;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section link style
* @tip Specify a color for your footer hyperlinks.
* @theme link_footer
*/
#footer a {
/*@editable*/ color:#FFFFFF;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/**
* @tab Page
* @section link style
* @tip Specify a color for all the hyperlinks in your email.
* @theme link
*/
a, a:link, a:visited {
/*@editable*/ color:#FFFFFF;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
</style>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" id="layout">
<tr>
<td id="header-top" colspan="2" mc:edit="header-top">
<p>Email not displaying correctly? <a href="*|ARCHIVE|*" title="View this email in your browser.">View it in your browser</a></p>
</td>
</tr>
<tr>
<td colspan="2">
<p>
<img align="left" hspace="20" src="http://logo_312x142.jpg" />
<td id="content-intro-text" colspan="2">
<div mc:edit="main">
<h1 class="primary-heading">Test</h1>
<h2 class="secondary-heading">This is a test</h2>
<p>Sample copy. Lorem ipsum dolor sit amet et est, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum.
</p>
</div>
</p>
</td>
</tr>
<tr>
<td colspan="1" id="content-left">
<div mc:repeatable>
<div class="widget" mc:edit="content-left-repeatable">
<h2 class="secondary-heading">Flush Your Coolant</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p>
<a href="" target="_blank">Read More</a>
</div>
</div>
</td>
<td colspan="1" id="content-right">
<div mc:repeatable>
<div class="widget" mc:edit="content-right-repeatable">
<h2 class="secondary-heading">Flush Your Coolant</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p>
<a href="" target="_blank">Read More</a>
</div>
</div>
</td>
</tr>
<tr>
</table>
<span style="padding: 0px;"></span>
</body>
</html>
答案 0 :(得分：2)
在此示例中查看如何执行此操作
http://www.ironspider.ca/graphics/alignment.htm
这个想法是在图像中使用align属性（将图像放在同一段落中）
并在hspace / vspace属性
有点像：
<tr>
<td colspan="2">
<p>
<img align="left" hspace="20" src="http://logo_312x142.jpg" />
<div mc:edit="main">
<h1 class="primary-heading">Test</h1>
<h2 class="secondary-heading">This is a test</h2>
<p>Sample copy. Lorem ipsum dolor sit amet et est, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum.
</p>
</div>
</p>
</td>
</tr>
答案 1 :(得分：1)
在编写电子邮件html模板时解决问题，不要害羞使用传统的<table>标记来整理您的内容。在电子邮件客户端兼容性方面存在一个巨大的问题，一些是正确的，有些渲染它很奇怪...等等
在你的情况下，到目前为止这么好..现在你决定把所有这些都放在一个<td>...</td>中，对吧..如果你想移动文本内容（h1，h2，p..etc） ）放在img徽标下面，我想你可以在img的末尾添加<br>。从逻辑上说这应该有效，对吧？ eventough h1本身是一个块元素，但在电子邮件客户端中可以以不同的方式呈现内容。
或者，只需在tr之后添加另一个<tr>..</tr>徽标..有意义吗？
OR，old-skool风格，“嵌套表”！ ：D当然我不推荐..
告诉我们是否有帮助。 ：）