財団は、レイアウト

Question

EDIT破る：をこの問題はインライナーのバージョン2に存在している、私はV1を試してみましたが、すべてが正常に動作しています。

v1を使用して私の小さな勝利にもかかわらず、電子メールは全く応答していません。モバイルデバイスにはデスクトップバージョンとして表示され、ブラウザではResponsiveです。私のコードはすべて基礎チュートリアルのバニラの抜粋です。誰かがこの問題をどのように修正できるのか分かっているなら、分かち合いましょう。ありがとう！

---

私はメールのZurb財団を使用してreponsiveメールを作っています。すべてがうまくいっていますが、メールを終えてHTML/CSS Inliner toolに入れると、私のメールが破れます。すべてがブラウザに散在していますが、どうすればこの問題を回避できますか？そのTutorial page. に、ここで説明したように、私はデフォルトのグリッドの配置を使用しています

異なる唯一のことは、私は、いくつかの内部ementsためfoundation.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; 
} 

Answer 1

私は物事をうまくするために管理：

は、ここに私のカスタムCSSです。

私は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をインライン化させることになります。そうしないと、手動でインライン化しなければならず、これは動作しません。それは私の特定の問題トップ記事で説明を解決ので、答えとしてこれを選択した

---

。