基础电子邮件3列布局已损坏

时间:2018-07-02 20:00:49

标签: zurb-foundation html-email

我正在使用Foundation for Email和默认的“ Marketing”电子邮件模板,该模板中包含3列功能部分。在本部分中,中间功能被推到比Outlook 2010和2013周围的两列略低的位置。有人遇到此问题并找到了一个好的解决方案吗?

<container>
<row class="collapse background-light-blue">
    <columns small="12" large="12">
        <center><img src="headerimage.png"></center>
    </columns>
</row>

<spacer size="16"></spacer>

<row>
    <columns>
        <h3 class="text-center">Refreshing Tips for Summer Hydration!</h3>
        <p class="text-center">As temperatures soar during the summer months, so does the risk of dehydration. Get tips and resources to support your patients' and clients' hydration needs this season.</p>
    </columns>
</row>
<row>
    <columns large="4">
        <center>
            <img src="image1.png">
        </center>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
        <a href="https://www.splenda.com/food-service/industry-insights">
            <center><img src="READMORE.png" width="164"/></center>
        </a>
    </columns>
    <columns large="4">
        <center>
            <img src="image2.png">
        </center>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
        <a href="https://www.splenda.com/food-service/industry-insights">
            <center><img src="READMORE.png" width="164"/></center>
        </a>
    </columns>
    <columns large="4">
      <center>
        <img src="image3.png">
      </center>
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
        <a href="https://www.splenda.com/food-service/industry-insights">
            <center><img src="READMORE.png" width="164"/></center>
        </a>
        <spacer size="15"></spacer>
        <a href="https://www.splenda.com/food-service/industry-insights">
            <center><img src="READMORE.png" width="164"/></center>
        </a>
    </columns>
</row>

enter image description here

0 个答案:

没有答案