Question

问题的实质：对于移动设备，如何使块堆叠的顺序相反？一些例子：

全宽设计示例

Example of design for full width

针对移动设备和所需更改的设计示例

Example of design for mobile and changes wanted

我为此使用了mjml电子邮件框架：

<mjml version="3.3.3"><mj-body background-color="#ffffff">
<mj-section background-color="SILVER" text-align="center" vertical-align="middle"  padding="40px 0 25px">
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://bellard.org/bpg/2.png" target="_blank" width="121px"></mj-image>
  </mj-column>
  <mj-column background-color="SILVER" width="50%">
    <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
        Text Block1
    </mj-text>
  </mj-column>
</mj-section>
<mj-section background-color="#ffffff" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
  <mj-column background-color="#ffffff" width="50%">
    <mj-text  background-color="#ffffff" align="middle" color="black" font-size="22px" font-weight="bold">
        Text Block2
        </mj-text>
  </mj-column>
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" target="_blank" width="121px"></mj-image>
  </mj-column> 
</mj-section>    
<mj-section background-color="SILVER" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://www.axialis.com/tutorials/sample/logo-ps.png" target="_blank" width="121px"></mj-image>
  </mj-column>
  <mj-column background-color="SILVER" width="50%">
    <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
        Text Block3
    </mj-text>
  </mj-column>
</mj-section>

可以在右上角的“查看HTML”标签中 https://mjml.io/try-it-live/SJxb4Lo4m查看纯HTML。

提前感谢您的帮助！

Answer 1

以下代码完全按照您想要的方式工作！我刚刚在代码的第2部分中添加了“ direction”属性，我们想在其中更改显示方向。

<mjml version="3.3.3">
  <mj-body background-color="#ffffff">
    <mj-section background-color="SILVER" text-align="center" vertical-align="middle"  padding="40px 0 25px">
      <mj-column width="50%" align="middle" >
        <mj-image align="middle" src="https://bellard.org/bpg/2.png" target="_blank" width="121px"></mj-image>
      </mj-column>
      <mj-column background-color="SILVER" width="50%">
        <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
            Text Block1
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle" direction="rtl" >
      
      <mj-column width="50%" align="middle" direction="ltr" >
        <mj-image align="middle" src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" target="_blank" width="121px"></mj-image>
      </mj-column> 
      <mj-column background-color="#ffffff" width="50%" direction="ltr">
        <mj-text  background-color="#ffffff" align="middle" color="black" font-size="22px" font-weight="bold">
            Text Block2
            </mj-text>
      </mj-column>
    </mj-section>    
    <mj-section background-color="SILVER" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
      <mj-column width="50%" align="middle" >
        <mj-image align="middle" src="https://www.axialis.com/tutorials/sample/logo-ps.png" target="_blank" width="121px"></mj-image>
      </mj-column>
      <mj-column background-color="SILVER" width="50%">
        <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
            Text Block3
        </mj-text>
      </mj-column>
    </mj-section>    
  </mj-body>
</mjml>

响应式电子邮件：移动设备的反向块堆叠设计

1 个答案: