html - EDM 模板中的顶部对齐 <td>-6ren

html - EDM 模板中的顶部对齐

转载作者：行者123 更新时间：2023-11-27 22:54:24

希望有人能帮助我解决一个小问题，我正在修改电子邮件模板的代码。

模板包含<td>是的，当添加额外的副本时，它们居中对齐，但我不知道如何让它们顶部对齐。就像我在下面的屏幕截图中显示的那样:

Screenshot of issue

希望有人可以帮助解释我需要进行的调整。非常感谢!

代码如下:

<!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]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->View Video<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![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]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->A Button<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![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]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->A Button<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![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/> &nbsp; <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/

文章推荐： c++ - *here* 的参数相关查找如何？

文章推荐： html - 如何强制浏览器清除缓存以便显示我网站上的更改？

文章推荐： javascript - 添加此电子邮件共享 onClick 弹出模式不起作用

文章推荐： javascript - 尝试同时设置多个属性

android - 如何在 android 中的单个 ImageView 中添加两个渐变(顶部-底部和底部-顶部)？
我正在尝试向图像顶部和底部的 ImageView 添加渐变。我不想在 ImageView 之上添加 TextView 。我该如何实现？最佳答案看来您简单而干净的解决方案是用 FrameLayout
PowerShell - 排序、顶部
我可以寻求帮助吗，我有日期 - “公司名称”和“日期”，例如 $value |"Comp Name"| "Date" | |:----------|----------:| |computer
sql - 左加入最大值/顶部
我有两个表，我试图从中运行查询以返回每个人的最大(或最高)交易。我应该注意，我无法更改表结构。相反，我只能拉数据。人 +-----------+| id | name |+-----------+|
c++ - 关闭管道时收到双重释放或损坏(顶部)？
所以我有一个用管道打开的 n 个流的数组，但是使用 gdb，我发现当我尝试关闭流或管道的写入端时程序失败。我可以很好地写入管道，但关闭它们不起作用。我在程序上运行 valgrind，它所做的只是打印出
ios - 如何创建一个标签栏出现在左边而不是底部/顶部？
大家好，这是我的难题。我正在尝试创建一个标签栏，该标签栏从上到下锚定在左侧，而不是从左到右锚定在底部。我创建了一个工具栏项目，将栏准确地放置在我想要的位置，但我希望选项卡栏相同，具有相同的功能，当然除
html - 如何停止标题中的菜单(顶部)
http://jsfiddle.net/GuXQZ/3/ header slideshow lates Content
jquery - 顶部 slider
我的图片出了点问题，我无法解决这个问题。这是我的代码.. HTML HIDE CSS #ads { -webkit-border-bottom-right-r
css - 顶部/底部填充溢出滚动一般屏幕
我有一个包含 3(css 网格)列的设计。第二列有嵌套的网格内容需要垂直滚动，而其他两列保持各自的高度。我给第二个嵌套列一个溢出，但我还需要给它一个顶部和底部填充或边距。我的解决方案没有顶部/底部填充
ios - 顶部/底部位置的UIToolbar外观界面
我在 View 中有两个 UIToolbar，分别在顶部和底部。我正在尝试在 iOS 版本中一致地应用外观。从 iOS5 开始有这个 setBackgroundImage: forToolbarPos
javascript - 在javascript中获取div位置(顶部)？
一个 div 我使用 top:-26px; 在 css 中设置高度。我有其他 div 其他地方我想与那个 div 对齐。我注意到在 jquery 中编写 .css('top') 得到了我的 css 而
jquery 追加到列表的前面/顶部
我有这个无序列表 two three 有没有一种方法可以将无序列表添加到无序列表的前面，使其像这样结束？ ONE two three 请注意“ONE”已添加到列表
viewport - 检测鼠标何时离开视口(viewport)顶部？
我想检测鼠标何时离开顶部的视口(viewport)(可以说是向北)。我在网上搜了下How can I detect when the mouse leaves the window? .是一个好的开始
postgresql - 顶部 PostgreSQL 命令中括号中的数字
运行顶级命令top -c在 Ubuntu 服务器上显示当前正在运行的所有命令。关于 PostgreSQL 命令，括号中的值是什么意思？我说的是图片中红色框旁边的值。最佳答案我找不到任何文档来支持这
gtk3 - GtkTextView 顶部/底部边距？
我想知道将顶部和底部边距添加到 GtkTextView 的正确且普遍接受的方法位于 GtkScrolledWindow 内.有设置左右边距的功能，我正在使用: gtk_text_view_set_le
Vulkan 顶部/管道底部和 ALL_COMMANDS
作为很多“初学者”，我认为使用 TOP_OF_PIPELINE 作为 dst 和 BOTTOM_OF_PIPELINE 作为 src 意味着 ALL_COMMANDS 两者。 Here Nicol B
javascript - 如何确定滚动浏览器窗口底部是否已到达 DIV 顶部？
我正在尝试使用 jQuery/Javascript 解决这个问题: 当浏览器向下滚动且窗口底部到达页脚 DIV 顶部时，执行 CSS 代码更改。问题示例: https://elodywedding.
javascript - 访问范围输入值以将其显示在 slider 顶部
我想使用范围 slider 来选择一个值并将该值呈现在 Angular 中的范围选择器顶部。我的html代码是: Raio: {{raio}} metros 在我的 co
javascript - 将图像元素放置在 Canvas 顶部
我想将手的图片放在靠近脸部的黑色 Canvas 上。这可以吗？有没有办法确定图片的位置？这是我的代码: var canvas; var canvasContext; window
macos - 管道和 xargs => 顶部
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 9 年前。 Improve this
macos - 管道和 xargs => 顶部
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 9 年前。 Improve this

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - EDM 模板中的顶部对齐