电子邮件的基础内联工具中断布局

编辑：此问题是在内联版本2中存在，我试过V1和一切工作正常。电子邮件的基础内联工具中断布局

尽管我使用v1取得了小小的胜利，但电子邮件根本没有响应，它在移动设备上显示为桌面版本，而在浏览器中显示为响应。我所有的代码都是基础教程的香草摘录。如果有人知道我该如何解决这个问题，请分享。谢谢！

我正在使用Zurb基金会的电子邮件一个reponsive电子邮件。一切都很好，但是当我完成我的电子邮件并将它放入HTML/CSS Inliner tool后，我的电子邮件就会中断。一切都散布在浏览器周围，我怎么能绕过这个问题？

我使用的默认网格布局如上所述在Tutorial page. 唯一不同的是，我在foundation.css中为一些内部元素添加了更多行和一些自定义样式，与网格无关，和其他一些内联样式，这些样式也只是颜色和文本对齐。

这里是我的自定义CSS：

#topRight { 
    padding: 3% 0 0 30%; 
    font-size: 12px; 
} 

#topRight a img, #topRight a span { 
display: inline-block; 
vertical-align: middle; 
} 

.serviceLinks a { 
    display: inline-block; 
    width: 32%; 
} 

.serviceLinks a img { 
    text-align: center; 
    margin: 0 auto; 
} 

#footer { 
    background: #32a0ca; 
} 
#footer p { 
text-align: center; 
color: #fff; 
font-size: 12px; 
} 
#footer a { 
    color: #35cdff; 
} 
#footer th { 
    padding: 3%; 
    margin: 0; 
}

来源

2016-05-14 snkv

我设法工作的事情了。

我使用了ZURB Email Stack，这是创建响应式电子邮件最容易和最快捷的工具。它使用NodeJS，它运行自己的本地服务器并为你解析所有事情，就像SASS/LESS/Stylus等设法使用CSS来为你做。

您可以在一个单独的模块文件中创建布局，该文件将其注入到它自己的空白HTML模板中。它可以让你专注于你的网格，通过使用像这样的基本层次结构：

<container> 
    <row> 
    <columns small="12" large="6">Column One</columns> 
    <columns small="12" large="6">Column Two</columns> 
    </row> 
</container>

它基本上为你做所有的工作。没有桌子，没有桌子嵌套和重影，没有td，没有th。

这太神奇了。尝试一下。

重要：虽然this tool作品像变魔术一样，你不应该忘记在你的CLI使用npm run build开始你的基础看过程。这将迫使框架为你内联CSS，否则你将不得不手动内联它，这是行不通的，相信我。

选择这个作为一个答案，因为它解决了顶帖描述了我特定问题。

来源

2016-05-14 13:47:15 snkv

电子邮件的基础内联工具中断布局

回答

相关问题