Question

我正在尝试使用Foundation for e-mail创建电子邮件模板。

这是我的代码段：

<container class="card-spacer">
    <row>
        <columns small="12" large="6">
            <img src="https://b.zmtcdn.com/data/pictures/0/18419730/bb6821c381f4616717178beca3929af7.jpg" style="display: inline-block;"
        </columns>
        <columns small="12" large="6">
            <p class="zfb-zero-margin-paragraph zfb-primary-text-font text-right">Get more insights and analytics on your ads</p>
            <p class="zfb-zero-margin-paragraph zfb-body-text-font text-right">View web dashboard for XYZ <a href="www.xyz.com" class="text-color-gold">www.xyz.com</a></p>
        </columns>  
    </row>
</container>

我希望将不同列中的图像和文本并排显示在较大的设备（如桌面电子邮件客户端）上，并在移动客户端上相互堆叠。

有关如何实现同样目标的任何见解？

Answer 1

如果未给出明确的大小，flex网格中的列将不会换行 - 这是允许神奇的自动调整大小工作的原因。要在较小的屏幕上堆叠列，请手动添加类.small-12。

要从百分比或缩小行为切换回展开行为，请使用类.medium-expand或.large-expand。在下面的示例中，列在小屏幕上堆叠，在大屏幕上变为偶数宽度。

    <div class="row">
       <div class="small-12 large-expand columns">One</div>
       <div class="small-12 large-expand columns">Two</div>
    </div>

    For more information check its document
    http://foundation.zurb.com/sites/docs/flex-grid.html

堆积在基础上的列

1 个答案: