- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
希望有人能帮助我解决一个小问题,我正在修改电子邮件模板的代码。
模板包含<td>
是的,当添加额外的副本时,它们居中对齐,但我不知道如何让它们顶部对齐。就像我在下面的屏幕截图中显示的那样:
希望有人可以帮助解释我需要进行的调整。非常感谢!
代码如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>EmailTemplate-Responsive</title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->
<!-- CSS Reset -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<!-- Progressive Enhancements -->
<style type="text/css">
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #3eaeef !important;
border-color: #3eaeef !important;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/NineLogo_2D.png" width="200" height="50" alt="Nine-Logo" border="0"></td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td class="full-width-image"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/9Galaxy_New-TemplateHeader.jpg" width="600" alt="Jordan-Hooper" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;"></td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text : BEGIN -->
<tr>
<td style="padding: 40px; text-align: center; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
<span style="color: #3697e9; font-size: 25px;"><strong>Nine Galaxy 101<br /></strong></span>
<br>
At Nine we have made TV buying easier with the most advanced buying platform, 9Galaxy. 2019 saw the launch of dynamic audience delivery across all screens, allowing media buyers to buy Nine’s linear TV and broadcast video on demand inventory in one simple transaction.
Wavemaker’s Senior Client Manager, Jordan Hooper, speaks about the benefits of 9Galaxy, saying that it provides speed, accuracy and consistency for their clients, and delivers on audience and reach goals.
To learn more, click below.
<br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td style="border-radius: 40px; background: #008fe1; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #008fe1; border: 15px solid #008fe1; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 30px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->View Video<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
<!-- Two Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
2020 promises to be a revolutionary year for television with the launch of VOZ or Virtual Australia, the new measurement platform coming in February next year. <br><br> Agencies and TV executives both see this new system giving clients a better understanding of how audiences are shifting and, while they may not be watching the traditional TV screen as much, they are still engaging with the content across multiple devices.<br><br> AdNews asked some of TV's senior executives for their predictions on what 2020 will look like. <br><br>Nine’s Richard Hunwick suggest “My call is that 2020 will be the year ‘Total Television’ comes into its own, as Brand returns to fashion and VOZ allows real and robust cross platform measurement between Linear TV and BVOD.<br><br>
Read more here.<br>
sdfasdfasdf asdfa sd asd fasdf
asd fasdf asdf asd fasd f
as dfasdf asdfasdfa</td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
Australia’s favourite social experiment is returning to our screens in 2020 and the search for love will again captivate hearts and minds across the country. As we meet a new group of singles this ratings juggernaut promises to reach new heights, all in the name of love.<br><br> For the second year in a row Married at First Sight was Australia’s No. 1 non-sports program of 2019. MAFS securing a national linear broadcast average audience of 1.948 million viewers per episode (Metro: 1.457 million / Regional: 491,000). The finale attracted a national linear broadcast average audience of 2.798 million viewers (Metro: 2.110 million / Regional: 688,000).<br><br> For a sneak peek at our new MAFS couples, click here. <br><br>Married at First Sight returning to Channel 9 and 9Now in 2020.
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Two Even Columns : END -->
<!-- Three Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Three Even Columns : END -->
<!-- Thumbnail Left, Text Right : BEGIN -->
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Right, Text Left : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<span class="mobile-link--footer"> Source: Text Here.</span> <br>
<br>
<a style="text-decoration: underline; color: #34a2fb;" href="https://www.nineforbrands.com.au/" target="_blank">nineforbrands.com.au</a> <br/> <br/> This email was sent to: <%= recipient.email %> <br/> <br/> <%@ include view='UnsubscriptionLink' %>
</td>
</tr>
</table>
<!-- Email Footer : END -->
</center></td>
</tr>
</table>
</body>
</html>
最佳答案
td.stack-column-center{
vertical-align: top;
display: table-cell;
}
add this css to HTML (given)
关于html - EDM 模板中的顶部对齐 <td>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59317413/
我收到类似上面标签的错误,该错误将位于 的位置 return View(st.employees.Find(id)); 只有上面的地方,任何人都可以帮助我吗!我的代码是 namespace
我在电子商务网站上使用 Azure 搜索,现在想要实现筛选。 我遇到了性能问题。我有产品索引。每个产品都属于类别。每个类别可以有嵌套的子类别。我的业务目的是,当客户位于类别页面时,我甚至需要显示子类别
我使用 breeze 谓词实现了一个过滤器。将 BreezeJs 和 ASP.NET WebAPI(Breeze 服务器端)与 Entity Framework 结合使用 谓词看起来像这样: var
这个问题在这里已经有了答案: Difference between Microsoft.OData.Core and Microsoft.Data.OData (1 个回答) 5年前关闭。 有人可以阐
从我的 Kendo ListView 调用 OData 时出现以下异常: "A binary operator with incompatible types was detected. Found
我不得不更改查询中一个参数的数据类型,现在我收到了此消息标题中概述的错误消息。我一直试图弄清楚问题出在哪里,我唯一能想到的是,由于查询的一个参数是一个数字,另一个是字符串,所以这是导致问题的原因。不幸
在 Visual Studio 2013 中,我使用 Nuget 中的 OData 客户端代码生成器使用 OData V4 端点。出乎意料的是,本周 t4 模板给出了错误:无法将类型为“Microso
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
我的字段类型为 java.util.date,我从中获取 to.string() 的值Sat Sep 14 00:00:00 IDT 2013 但我需要以不同的格式获取它,即 EDM 格式像 2013
希望有人能帮助我解决一个小问题,我正在修改电子邮件模板的代码。 模板包含是的,当添加额外的副本时,它们居中对齐,但我不知道如何让它们顶部对齐。就像我在下面的屏幕截图中显示的那样: 希望有人可以帮助解释
我使用的是 Ubuntu 16.04,我安装了 PyCharm 专业版,这样我就可以轻松运行 Django。 我从 https://gitlab.com/mayan-edms/mayan-edms 克
我有 Nopcommerce(NOP.Web) 应用程序。当我构建这个应用程序时,有Microsoft.Data.Edm.dll版本为 5.7.0.62414 的 BIN 文件夹内。 但是当我重建我的
我有一个表的 azure 搜索索引,该表的字段数据类型为 Edm.DateTimeOffset。以及以下过滤器:$filter=MyDateTimeOffset ge '4/14/2017 6:35:
HTML A journey in to the digital Global thought leaders HTML 浏览器支持这个 ul padding-left。所以
我正在 Marketo 中创建一个 eDM 时事通讯作为模板,它在除 gmail 之外的几乎所有内容中都可以正常查看。带有图像的 Div 似乎正在创建底部边距或其他东西,我不知道如何摆脱它。请参阅下面
我正在尝试使用 linq 的 ExecuteStoreQuery 方法从表中删除多行,如下所示 string query = "delete from IMPORTStatistics where
我们使用的是 Windows Azure 存储 NuGet 包版本 4.1.0,它依赖于 Microsoft.Data.OData,并且还添加了该包,其中包含 Microsoft.Data.Edm d
我有一个 edmx,它有一个名为“地址”的实体。实体“Address”有一个名为“GeoLocation”的属性,其类型为 地理 (空间类型)。 当我运行我的 javascript,对我的模型中的任何
我正在 OData 中编写一个 DateTime 过滤器查询,如下所示: ... + "$filter=SubmitTime lt datetime'2014-12-30T23:59:59.99Z'"
我有一个简单的实体数据模型(使用 VS2010),我从一个包含三个不相关表的简单 SQL Server 数据库对其进行逆向工程。 我尝试使用以下代码将数据保存到数据库: var dbOptions =
我是一名优秀的程序员,十分优秀!