【问题标题】:MJML edm how to make a column's height same as the other column?MJML edm 如何使一列的高度与另一列相同?
【发布时间】:2017-07-27 06:54:19
【问题描述】:

我正在尝试在我的 EDM 上实现以下设计:

我尝试了以下方法:

<mj-section
    padding="12px 48px 12px"
    background-color="#FFF"
>

    <mj-column width="50%">
        <mj-image
            src="assets/img/image-1.png"
            width="231px"
            padding="0"
            align="center"
        />
    </mj-column>

    <mj-column width="50%" background-color="#F0F0F0">
        <mj-text
            color="#101010"
            font-size="29px"
            line-height="35px"
            font-family="Arial, sans-serif"
            font-weight="700"
            align="right"
            padding="0"
        >
        <p>Lorem ipsum dolor sit amet</p>
        </mj-text>
    </mj-column>

</mj-section>

但我得到的不是我想要的结果:

如何使第二列的高度填满整个部分以等于另一列的高度?

希望有人能帮忙,谢谢!

【问题讨论】:

    标签: email html-email mjml


    【解决方案1】:

    您可以为整行(或两列)赋予相同的背景色

    <mj-section
    padding="12px 48px 12px"
    background-color="#fff">
    
    <mj-section
    background-color="#F0F0F0">
    
    <mj-column width="50%" background-color="#F0F0F0">
        <mj-image
            src="assets/img/image-1.png"
            width="231px"
            padding="0"
            align="center"/>
    </mj-column>
    
    <mj-column width="50%" background-color="#F0F0F0">
        <mj-text
            color="#101010"
            font-size="29px"
            line-height="35px"
            font-family="Arial, sans-serif"
            font-weight="700"
            align="right"
            padding="0"
        >
        <p>Lorem ipsum dolor sit amet</p>
        </mj-text>
    </mj-column>
    </mj-section>
    </mj-section>
    

    让我知道这是否有效。

    【讨论】:

    • 如果更改部分的颜色会怎样? (刚刚编辑的代码)
    • 你能把一个部分放在一个部分里面吗?查看上面更新的代码
    • 不要害怕编辑代码或尝试新事物(只要你有备份)。电子邮件编码很有趣!
    • 部分不能相互嵌套,根据官方文档mjml.io/documentation/#mjml-section
    猜你喜欢
    • 2012-12-13
    • 1970-01-01
    • 2017-06-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-19
    • 1970-01-01
    相关资源
    最近更新 更多