【问题标题】:Mailchimp: Table columns are different heights. How can I make them all this same?Mailchimp:表格列的高度不同。我怎样才能让它们都一样?
【发布时间】:2017-07-01 23:28:48
【问题描述】:

我使用的是 Mailchimp 模板。我需要 9 个带有图像和文本信息的部分。我创建了 9 个 3x3 部分。我使用了模板生成器上的选项,您可以在其中使用图像和标题。图片下方的文字说明。它的样式为<td>。但是,我在确保高度都相同以使其看起来对齐时遇到了很多麻烦。我似乎无法弄清楚。我弄乱了填充,我什至添加了高度(以前没有)以及制作overflow: hidden; CSS...一切,但每个部分都在不断变化,而且看起来并不对齐。有没有办法解决这个问题?

查看我的第一列代码部分(最初由 Mailchimp 生成,然后由我自定义):

 <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
                  <tr>
                    <td align="left" valign="top" class="columnsContainer" width="33%">
                      <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumn">
                        <tr>
                          <td valign="top" class="leftColumnContainer">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageCardBlock">
                              <tbody class="mcnImageCardBlockOuter">
                                <tr>
                                  <td class="mcnImageCardBlockInner" style="padding-top:9px;padding-right:18px;padding-bottom:2px;padding-left:18px;">

                                    <table align="right" border="0" cellpadding="0" cellspacing="0" class="mcnImageCardBottomContent" width="100%" height="100%" overflow="hidden" style="background-color:#2D6C73;">
                                      <tbody>
                                        <tr>
                                          <td class="mcnImageCardBottomImageContent" align="left" style="padding-top:0px;padding-right:0px;padding-bottom:0;padding-left:0px;">


                                            <a href="http://teendrive365inschool.com/teens/video-challenge?utm_source=DE&amp;utm_campaign=waystowin&amp;utm_medium=email" title="" target="_blank">

                                              <img alt="Toyota TeenDrive365" src="https://gallery.mailchimp.com/03342d2b00b6ccea697a3e7e5/images/be1f6169-1a44-4c56-ab24-82a3c96d7eec.jpg" width="164" style="max-width:480px;" class="mcnImage">
                                            </a>

                                          </td>
                                        </tr>
                                        <tr>
                                          <td class="mcnTextContent" style="padding:8px 15px;color:#FFFFFF;font-family:Helvetica;font-size:11px;font-weight:normal;line-height:110%;text-align:center;" width="146" height="80" overflow="hidden;">
                                            <span style="font-size:11px">
                                              <strong>Toyota TeenDrive365 Video Challenge </strong>
                                            </span>
                                          <span style="font-size:10px"><br />
                                          Film a safe driving PSA for&nbsp;a&nbsp;chance at $15,000!</span>
                                          <br>
                                          <span style="font-size:11px"><strong>Challenge Closes February 23</strong></span>
                                          <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
                              <tbody class="mcnButtonBlockOuter">
                                <tr>
                                  <td style="padding-top:5px;padding-right:0px;padding-bottom:0px;padding-left:0px;" valign="top" align="center" class="mcnButtonBlockInner">
                                    <table border="0" cellpadding="0" cellspacing="0" width="70%" class="mcnButtonContentContainer" style="border-collapse:separate !important;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;background-color:#0C4B74;">
                                      <tbody>
                                        <tr>
                                          <td align="center" valign="center" class="mcnButtonContent" style="font-family:Arial;font-size:11px;padding:8px;">
                                            <a class="mcnButton" title="Learn More" href="http://teendrive365inschool.com/teens/video-challenge?utm_source=DE&amp;utm_campaign=waystowin&amp;utm_medium=email" target="_blank" style="font-weight:bold;letter-spacing:normal;line-height:100%;text-align:center;text-decoration:none;color:#FFFFFF;">Learn More</a>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>

【问题讨论】:

    标签: html css html-table html-email mailchimp


    【解决方案1】:

    结果我需要将所有表格组合成一个类并将它们编码在一起。他们都是不同的班级。我想到了。谢谢。这可以关闭/删除。

    【讨论】:

      猜你喜欢
      • 2011-09-27
      • 1970-01-01
      • 1970-01-01
      • 2021-05-27
      • 1970-01-01
      • 2012-04-22
      • 2014-09-07
      • 2013-03-01
      相关资源
      最近更新 更多