如何使用 MJML（列嵌套在列中）构建复杂的电子邮件布局？

Posted 2023-03-05

【中文标题】如何使用 MJML（列嵌套在列中）构建复杂的电子邮件布局？

【英文标题】：How to build a complex email layout with MJML(columns nested in columns)?

【发布时间】：2022-01-05 21:07:37

【问题描述】：

我正在努力实现这种电子邮件外观。我曾尝试在 mj-text 语法中使用纯 html，但 html 的行为与普通 html 不同。我决定使用mj-table，但造型并不容易，我被卡住了。任何帮助，将不胜感激。提前致谢

这是我想要的结果：

这是我目前得到的：

我的代码：

<mj-head>
        <mj-attributes>
            <mj-text padding="0" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;" color="#1d1d1f"/>
            <mj-section padding="0"/>
            <mj-wrapper padding="0" background-color="#fff" border-right="1px solid right"/>
            <mj-button padding="0"/>
            <mj-column padding="0"/>
            <mj-image padding="0"/>
            <mj-table padding="0"/>
            <mj-class name="head-text" font-size="36px" font-weight="600"/>
            <mj-class name="product" border-radius="15px"/>
        </mj-attributes>     
</mj-head>



<mj-body>
    <mj-wrapper>
         <mj-section>
              <mj-column  background-color="#f3f7fd">
                    <mj-image src="https://image.s10.sfmc-content.com/lib/fe3411717064057d731372/m/1/8c5599db-0f74-40e1-8704-5bf6465deb88.png"  />
                     <mj-text>
                               <p style="margin:8px">New</p>
                               <p style="margin:8px">iPhone 13</p>
                               <p style="margin:8px 8px 25px">From $799 or $33.29/mo. for 24 mo. <sup>1</sup></p>
                      </mj-text>
              </mj-column>
              <mj-column  >
                    <mj-table  border="1px solid red">
                               <tr style="padding-left: 20px">
                                    <td style=" width: 30%; border: 1px solid blue">
                                        <p style="margin:0;">New</p>
                                        <p style="margin:0;">iPhone 13</p>
                                        <p style="margin:0;">Silicone Case</p>
                                        <p style="margin:0;">$49</p>
                                    </td>
                                    <td style="border: 1px solid red">
                                        <img style="width: 100px" 
                                         src="https://image.s10.sfmc- content.com/lib/fe3411717064057d731372/m/1/d8c123db-38c2-4e79-b169-e243b320c6a8.png" />
                                    </td>
                               </tr>
                               <tr style="border: 1px solid green" >
                                    <td style="border: 1px solid purple">
                                        <img style="width: 200px;" src="https://image.s10.sfmc-content.com/lib/fe3411717064057d731372/m/1/62b98203-08b0-4974-b1c8-931b2e710b16.png" />
                                    </td>    
                               </tr>
                   </mj-table>
             </mj-column>
        </mj-section>
    </mj-wrapper>

【问题讨论】：

如果您需要在右侧使用表格，我建议仅将其用于第一行并将最终图像放在表格之外，以便它可以轻松跨越整个列宽。跨度>

【参考方案1】：

我还没有看过你想要对布局做的所有事情，但这里是让你的元素相互之间保持正确关系的基本想法。

主要的变化是将最终图像从表格中取出并直接放在下方，以便它可以轻松跨越整个列宽。

此代码还将红色电话图像作为背景放入表格中，只是因为这样做看起来更自然，但当然如果 img 适合您，则替换它。

<mjml>
  <mj-body>
    <mj-wrapper>
         <mj-section>
              <mj-column  background-color="#f3f7fd">
                    <mj-image src="https://image.s10.sfmc-content.com/lib/fe3411717064057d731372/m/1/8c5599db-0f74-40e1-8704-5bf6465deb88.png"  />
                     <mj-text>
                               <p style="margin:8px">New</p>
                               <p style="margin:8px">iPhone 13</p>
                               <p style="margin:8px 8px 25px">From $799 or $33.29/mo. for 24 mo. <sup>1</sup></p>
                      </mj-text>
              </mj-column>
              <mj-column  >
                    <mj-table  border="1px solid red">
                               <tr style="padding-left: 20px">
                                    <td style=" width: 60%; border: 1px solid blue; padding: 10px;">
                                        <p style="margin:0;">New</p>
                                        <p style="margin:0;">iPhone 13</p>
                                        <p style="margin:0;">Silicone Case</p>
                                        <p style="margin:0;">$49</p>
                                    </td>
                                    <td style="border: 1px solid red; background-image: url(https://image.s10.sfmc-content.com/lib/fe3411717064057d731372/m/1/d8c123db-38c2-4e79-b169-e243b320c6a8.png); background-size: contain; background-repeat: no-repeat; background-position: center;">
                                       
                                    </td>
                               </tr>
                   </mj-table>
                    <mj-image src="https://image.s10.sfmc-content.com/lib/fe3411717064057d731372/m/1/62b98203-08b0-4974-b1c8-931b2e710b16.png" />
             </mj-column>
        </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

【讨论】：

谢谢，这是个好主意。我得到了全宽的最终图像。但是，最终图像的高度大于其兄弟组件（即其上方的表格）。它们的高度应该相等，我不能使用像 css 这样的任何高度属性。你有什么建议吗？